nshop-front-pc/src/components/layout/footer/index.tsx

import Link from "next/link";
import { Suspense } from "react";
import { getThemeCustomization } from "@/utils/bagisto";
import { env } from "@/env";
import LogoIcon from "@components/common/icons/LogoIcon";
import FaceBookIcon from "@components/common/icons/social-icon/FaceBookIcon";
import InstaGramIcon from "@components/common/icons/social-icon/InstaGramIcon";
import TwitterIcon from "@components/common/icons/social-icon/TwitterIcon";
import Subscribe from "./Subscribe";
import FooterMenu from "./FooterMenu";


export default async function Footer() {
  const currentYear = new Date().getFullYear();
  const copyrightDate = 2010 + (currentYear > 2010 ? `-${currentYear}` : "");
  const skeleton =
    "w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700";
  const menu = await getThemeCustomization();
  const copyrightName = env.STORE_NAME;


  return (
    <>
      <footer className="border-t border-neutral-200 text-sm text-neutral-500 dark:border-neutral-700 dark:text-neutral-400">
        <div className="mx-auto flex w-full max-w-screen-2xl flex-col justify-between gap-6 gap-y-6 px-6 py-12 text-sm dark:border-neutral-700 min-[880px]:flex-row min-[880px]:gap-12 min-[880px]:gap-y-20 min-[880px]:px-4">
          <div className="flex flex-col gap-[14px]">
            <Link
              className="flex items-center gap-2 md:pt-1 cursor-pointer"
              href="/"
              aria-label="Go to homepage"
              title="Go to homepage"
            >
              <LogoIcon />
              <span className="sr-only">Go to homepage</span>
            </Link>
            <div className="flex gap-[14px]">
              <Link
                href={"#"}
                aria-label="Visit Bagisto Store on Facebook"
                title="Facebook"
                target="_blank"
                className="cursor-pointer"
              >
                <FaceBookIcon />
                <span className="sr-only">Facebook</span>
              </Link>
              <Link
                href={"#"}
                aria-label="Visit Bagisto Store on Instagram"
                title="Instagram"
                target="_blank"
                className="cursor-pointer"
              >
                <InstaGramIcon />
                <span className="sr-only">Instagram</span>
              </Link>
              <Link
                href={"#"}
                aria-label="Visit Bagisto Store on Twitter"
                title="Twitter"
                target="_blank"
                className="cursor-pointer"
              >
                <TwitterIcon />
                <span className="sr-only">Twitter</span>
              </Link>
            </div>
          </div>
          <div className="flex flex-col gap-x-8 md:flex-row lg:gap-x-[50px]">
            <Suspense
              fallback={
                <div className="flex h-[188px] w-[200px] flex-col gap-2">
                  {Array(6)
                    .fill(0)
                    .map((_, index) => (
                      <div key={index} className={skeleton} />
                    ))}
                </div>
              }
            >
              <FooterMenu
                menu={menu?.footer_links?.themeCustomizations?.edges}
              />
            </Suspense>
            <Subscribe />
          </div>
        </div>
        <div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
          <div className="mx-auto flex w-full max-w-screen-2xl flex-col justify-center gap-1 px-4 md:flex-row">
            <p className="text-center">
              &copy; {copyrightDate} {copyrightName}
              {copyrightName.length && !copyrightName.endsWith(".")
                ? "."
                : ""}{" "}
              All rights reserved.
            </p>
            <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
            <p className="text-center">Designed in Bagisto</p>
          </div>
        </div>
      </footer>
    </>
  );
}