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

import Link from "next/link";
import { Suspense } from "react";
import { serverGraphqlFetch } from "@/utils/bagisto";
import type {
  GetFooterResponse,
  ThemeCustomizationResult
} from "@/types/theme/theme-customization";
import {
  GET_FOOTER
} from "@/graphql";
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";


async function getFooterData(): Promise<ThemeCustomizationResult> {
 
    const [{data: footerRes}, {data:servicesRes}] = await Promise.all([
      serverGraphqlFetch<GetFooterResponse,{type: string;}>({
        query: GET_FOOTER,
        variables:{
          type: "footer_links",
        },
        takeAuthorization: false
      }),
      serverGraphqlFetch<GetFooterResponse,{type: string;}>({
        query: GET_FOOTER,
        variables:{
          type: "services_content",
        },
        takeAuthorization: false
      }),
    ]);
    return {
      footer_links: footerRes,
      services_content: servicesRes,
    };
}

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 getFooterData();
  const copyrightName = env.STORE_NAME;


  return (
    <>
      <footer className="border-t border-neutral-200 text-sm text-neutral-500">
        <div className="mx-auto flex w-full flex-col justify-between gap-6 gap-y-6 px-6 py-12 text-sm">
          <div className="flex flex-col gap-[14px]">
            <Link
              className="flex items-center gap-2 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">
            <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>
    </>
  );
}