@stackshift-ui/footer 6.0.3 → 6.0.4

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/footer",
   "description": "",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -33,18 +34,18 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
+    "@stackshift-ui/button": "6.0.3",
+    "@stackshift-ui/system": "6.0.3",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/text": "6.0.2",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/button": "6.0.2",
-    "@stackshift-ui/image": "6.0.2",
-    "@stackshift-ui/link": "6.0.2",
-    "@stackshift-ui/social-icons": "6.0.2",
-    "@stackshift-ui/section": "6.0.2",
-    "@stackshift-ui/container": "6.0.2",
-    "@stackshift-ui/flex": "6.0.2",
-    "@stackshift-ui/grid": "6.0.2",
-    "@stackshift-ui/grid-item": "6.0.2"
+    "@stackshift-ui/text": "6.0.3",
+    "@stackshift-ui/image": "6.0.3",
+    "@stackshift-ui/link": "6.0.3",
+    "@stackshift-ui/section": "6.0.3",
+    "@stackshift-ui/container": "6.0.3",
+    "@stackshift-ui/flex": "6.0.3",
+    "@stackshift-ui/grid": "6.0.3",
+    "@stackshift-ui/grid-item": "6.0.3",
+    "@stackshift-ui/social-icons": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/footer.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Footer } from "./footer";
+
+describe.concurrent("footer", () => {
+  afterEach(cleanup);
+
+  test.skip("Dummy test - test if renders without errors", ({ expect }) => {
+    const clx = "my-class";
+    render(<Footer />);
+    expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
+  });
+});

package/src/footer.tsx

@@ -0,0 +1,40 @@
+import React, { lazy } from "react";
+import { SectionsProps, Logo, ContactDetails, SocialLink, LabeledRouteWithKey } from "./types";
+
+const Variants = {
+  variant_a: lazy(() => import("./footer_a")),
+  variant_b: lazy(() => import("./footer_b")),
+  variant_c: lazy(() => import("./footer_c")),
+  variant_d: lazy(() => import("./footer_d")),
+};
+
+export interface FooterProps {
+  logo?: Logo;
+  text?: string;
+  contacts?: ContactDetails[];
+  copyright?: string;
+  socialMedia?: SocialLink[];
+  menu?: LabeledRouteWithKey[];
+  multipleMenus?: any;
+}
+
+const displayName = "Footer";
+
+export const Footer: React.FC<SectionsProps> = ({ data }) => {
+  const variant = data?.variant;
+  const Variant = variant && Variants[variant as keyof typeof Variants];
+
+  const props = {
+    logo: data?.variants?.logo ?? undefined,
+    text: data?.variants?.plainText ?? undefined,
+    contacts: data?.variants?.contactDetails ?? undefined,
+    copyright: data?.variants?.copyright ?? undefined,
+    socialMedia: data?.variants?.socialLinks ?? undefined,
+    menu: data?.variants?.menu ?? undefined,
+    multipleMenus: data?.variants?.multipleMenus ?? undefined,
+  };
+
+  return Variant ? <Variant {...props} /> : null;
+};
+
+Footer.displayName = displayName;

package/src/footer_a.tsx

@@ -0,0 +1,152 @@
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Grid } from "@stackshift-ui/grid";
+import { GridItem } from "@stackshift-ui/grid-item";
+import { Image } from "@stackshift-ui/image";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { SocialIcons } from "@stackshift-ui/social-icons";
+import { Text } from "@stackshift-ui/text";
+
+import { FooterProps } from ".";
+import { logoLink } from "./helper";
+import { ContactDetails, Logo, SocialLink, Socials } from "./types";
+
+export default function Footer_A({ logo, text, contacts, copyright, socialMedia }: FooterProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1000}>
+        <Flex wrap className="mb-5 lg:mb-20">
+          <LogoSection logo={logo} />
+          <TextContainer text={text} />
+          <ContactsContainer contacts={contacts} />
+        </Flex>
+        <Flex justify="between" align="center" className="w-full mx-auto lg:flex">
+          <CopyrightContainer copyright={copyright} />
+          <SocialMediaContainer socialMedia={socialMedia} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function LogoSection({ logo }: { logo?: Logo }) {
+  if (!logo?.image) return null;
+
+  return (
+    <div className="w-full mb-5 lg:w-1/5">
+      <Link
+        aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
+        className="text-3xl font-bold leading-none"
+        href={logoLink(logo)}
+        target={logo?.linkTarget}
+        rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
+        <Image
+          className="h-14"
+          src={`${logo?.image}`}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          width={132}
+          height={56}
+          alt={logo?.alt ?? "footer-logo"}
+        />
+      </Link>
+    </div>
+  );
+}
+
+function TextContainer({ text }: { text?: string }) {
+  if (!text) return null;
+
+  return (
+    <Container className="w-full mb-5 lg:w-1/5" maxWidth={1000}>
+      <Text muted className="leading-loose">
+        {text}
+      </Text>
+    </Container>
+  );
+}
+
+function ContactsContainer({ contacts }: { contacts?: ContactDetails[] }) {
+  if (!contacts) return null;
+
+  return (
+    <Container className="w-full mt-1 ml-auto lg:w-1/2" maxWidth={1000}>
+      {contacts?.map((contact, index) => (
+        <Grid columns={1} gap={4} className="lg:gap-10 md:grid-cols-3" key={index}>
+          <GridItem span={1}>
+            <Text weight="bold" className="mb-4">
+              Address
+            </Text>
+            <Text muted className="mb-5">
+              {contact?.addressInfo}
+            </Text>
+          </GridItem>
+          <GridItem span={1}>
+            <Text weight="bold" className="mb-4">
+              Email
+            </Text>
+            <Text muted className="mb-5">
+              {contact?.emailInfo}
+            </Text>
+          </GridItem>
+          <GridItem span={1}>
+            <Text weight="bold" className="mb-4">
+              Number
+            </Text>
+            <Text muted className="mb-5">
+              {contact?.contactInfo}
+            </Text>
+          </GridItem>
+        </Grid>
+      ))}
+    </Container>
+  );
+}
+
+function CopyrightContainer({ copyright }: { copyright?: string }) {
+  if (!copyright) return null;
+
+  return (
+    <Text muted className="text-sm">
+      {copyright}
+    </Text>
+  );
+}
+
+function SocialMediaContainer({ socialMedia }: { socialMedia?: SocialLink[] }) {
+  if (!socialMedia) return null;
+
+  return (
+    <Flex wrap className="space-x-2 lg:mx-10 lg:space-x-4">
+      {socialMedia?.map((social, index) => <SocialMediaLink social={social} index={index} />)}
+    </Flex>
+  );
+}
+
+function SocialMediaLink({ social, index }: { social?: SocialLink; index?: number }) {
+  if (!social?.socialMediaLink) return null;
+
+  return (
+    <Link
+      aria-label={social?.socialMedia || social?.socialMediaPlatform || ""}
+      className="inline-block p-2 mr-2 rounded bg-gray-50 hover:bg-gray-100"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={social?.socialMediaLink}
+      key={index}>
+      {social?.socialMediaIcon?.image ? (
+        <Image
+          className="h-6"
+          src={`${social?.socialMediaIcon?.image}`}
+          width={24}
+          height={24}
+          alt={social?.socialMediaIcon?.alt ?? "contact-socialMedia-icon"}
+        />
+      ) : (
+        <SocialIcons social={social?.socialMedia as Socials} />
+      )}
+    </Link>
+  );
+}
+
+export { Footer_A };

package/src/footer_b.tsx

@@ -0,0 +1,154 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Image } from "@stackshift-ui/image";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { SocialIcons } from "@stackshift-ui/social-icons";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+
+import { FooterProps } from ".";
+import { logoLink } from "./helper";
+import { LabeledRoute, LabeledRouteWithKey, Logo, SocialLink, Socials } from "./types";
+
+export default function Footer_B({ logo, copyright, socialMedia, menu }: FooterProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex wrap align="center" justify="between" className="pb-12 border-b border-gray-100">
+          <LogoSection logo={logo} />
+          <MenuLists menu={menu} />
+        </Flex>
+        <Flex wrap align="center" justify="between" className="mt-8">
+          <CopyrightContainer copyright={copyright} />
+          <SocialMediaContainer socialMedia={socialMedia} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function LogoSection({ logo }: { logo?: Logo }) {
+  if (!logo?.image) return null;
+
+  return (
+    <div className="w-full mb-12 lg:mb-4 lg:w-1/5">
+      <Link
+        aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
+        className="inline-block text-3xl font-bold leading-none"
+        href={logoLink(logo)}
+        target={logo?.linkTarget}
+        rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
+        <Image
+          src={logo?.image}
+          alt={logo?.alt ?? "footer-logo"}
+          width={132}
+          height={132}
+          className="inline-block text-3xl font-bold leading-none"
+        />
+      </Link>
+    </div>
+  );
+}
+
+function MenuLists({ menu }: { menu?: LabeledRouteWithKey[] }) {
+  if (!menu) return null;
+
+  return (
+    <div className="w-full lg:w-auto">
+      <Flex wrap align="center" justify="between" as="ul" className=" mt-8 lg:space-x-5">
+        {menu?.map((links, index, { length }) => (
+          <React.Fragment key={links?._key || index}>
+            <MenuList links={links} />
+            {index + 1 !== length ? <MenuSeparatorIcon /> : null}
+          </React.Fragment>
+        ))}
+      </Flex>
+    </div>
+  );
+}
+
+function MenuList({ links, index }: { links?: LabeledRoute; index?: number }) {
+  if (!links) return null;
+
+  return (
+    <li className="w-full mb-2 md:mb-0 md:w-auto" key={index}>
+      <Button
+        as="link"
+        link={links}
+        className="text-gray-500 no-underline lg:text-sm hover:text-gray-700"
+        ariaLabel={links?.label}>
+        {links?.label}
+      </Button>
+    </li>
+  );
+}
+
+function MenuSeparatorIcon() {
+  return (
+    <li className="hidden md:block">
+      <svg
+        className="w-4 h-4 mx-4 text-gray-500"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+        />
+      </svg>
+    </li>
+  );
+}
+
+function CopyrightContainer({ copyright }: { copyright?: string }) {
+  if (!copyright) return null;
+
+  return (
+    <Text muted className="order-last text-sm ">
+      {copyright}
+    </Text>
+  );
+}
+
+function SocialMediaContainer({ socialMedia }: { socialMedia?: SocialLink[] }) {
+  if (!socialMedia) return null;
+
+  return (
+    <div className="order-first mb-4 lg:order-last lg:mb-0">
+      {socialMedia?.map(social => <SocialMediaLink social={social} />)}
+    </div>
+  );
+}
+
+function SocialMediaLink({ social }: { social?: SocialLink }) {
+  if (!social?.socialMediaLink) return null;
+
+  return (
+    <Link
+      aria-label={social?.socialMedia || social?.socialMediaPlatform || ""}
+      className="inline-block p-2 mr-2 rounded bg-gray-50 hover:bg-gray-100"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={social?.socialMediaLink}
+      key={social?._key}>
+      {social?.socialMediaIcon?.image ? (
+        <Image
+          className="h-6"
+          src={`${social?.socialMediaIcon?.image}`}
+          width={24}
+          height={24}
+          alt={social?.socialMediaIcon?.alt ?? "contact-socialMedia-icon"}
+        />
+      ) : (
+        <SocialIcons social={social?.socialMedia as Socials} />
+      )}
+    </Link>
+  );
+}
+
+export { Footer_B };

package/src/footer_c.tsx

@@ -0,0 +1,154 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Image } from "@stackshift-ui/image";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { SocialIcons } from "@stackshift-ui/social-icons";
+import { Text } from "@stackshift-ui/text";
+
+import { FooterProps } from ".";
+import { logoLink } from "./helper";
+import { LabeledRoute, LabeledRouteWithKey, Logo, SocialLink, Socials } from "./types";
+
+export default function Footer_C({ logo, menu, copyright, socialMedia }: FooterProps) {
+  return (
+    <Section className="bg-background">
+      <BorderStyle />
+      <Container maxWidth={1000}>
+        <div className="pt-10 pb-12">
+          <Flex
+            justify="between"
+            align="center"
+            className="relative flex-col gap-8 mb-8 md:flex-row lg:border-b lg:border-gray-300 lg:pb-8">
+            <CopyrightSection copyright={copyright} />
+            <MenuLists menu={menu} />
+            <LogoSection logo={logo} />
+          </Flex>
+          <SocialMediaContainer socialMedia={socialMedia} />
+        </div>
+      </Container>
+    </Section>
+  );
+}
+
+function CopyrightSection({ copyright }: { copyright?: string }) {
+  if (!copyright) return null;
+
+  return <Text className="w-full text-sm text-center">{copyright}</Text>;
+}
+
+function LogoSection({ logo }: { logo?: Logo }) {
+  if (!logo?.image) return null;
+
+  return (
+    <div className="w-full text-center">
+      <Link
+        className="inline-block text-xl font-bold leading-none"
+        aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
+        href={logoLink(logo)}
+        target={logo?.linkTarget}
+        rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
+        <Image
+          src={logo?.image}
+          alt={logo?.alt ?? "footer-logo"}
+          className="inline-block text-xl font-bold leading-none"
+          width={64}
+          height={64}
+        />
+      </Link>
+    </div>
+  );
+}
+
+function MenuLists({ menu }: { menu?: LabeledRouteWithKey[] }) {
+  if (!menu) return null;
+
+  return (
+    <div className="mx-auto">
+      <Flex
+        className="flex-col gap-0 lg:flex-row lg:gap-10"
+        as="ul"
+        align="center"
+        justify="center">
+        {menu?.map((links, index) => <MenuList links={links} index={index} />)}
+      </Flex>
+    </div>
+  );
+}
+
+function MenuList({ links, index }: { links?: LabeledRoute; index?: number }) {
+  if (!links) return null;
+
+  return (
+    <li className="w-full text-center" key={index}>
+      <Button
+        as="link"
+        link={links}
+        className="text-sm text-center text-black no-underline hover:text-gray-500 whitespace-nowrap"
+        ariaLabel={links?.label}>
+        {links?.label}
+      </Button>
+    </li>
+  );
+}
+
+function SocialMediaContainer({ socialMedia }: { socialMedia?: SocialLink[] }) {
+  if (!socialMedia) return null;
+
+  return (
+    <Flex wrap justify="center" className="space-y-2 sm:space-y-0">
+      {socialMedia?.map((social, index) => <SocialMediaLink social={social} index={index} />)}
+    </Flex>
+  );
+}
+
+function SocialMediaLink({ social, index }: { social?: SocialLink; index?: number }) {
+  if (!social?.socialMediaLink) return null;
+
+  return (
+    <Link
+      aria-label={social?.socialMedia || social?.socialMediaPlatform || ""}
+      className="inline-block p-2 mr-2 rounded bg-gray-50 hover:bg-gray-100"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={social?.socialMediaLink}
+      key={index}>
+      {social?.socialMediaIcon?.image ? (
+        <Image
+          className="h-6"
+          src={`${social?.socialMediaIcon?.image}`}
+          width={24}
+          height={24}
+          alt={social?.socialMediaIcon?.alt ?? "contact-socialMedia-icon"}
+        />
+      ) : (
+        <SocialIcons social={social?.socialMedia as Socials} />
+      )}
+    </Link>
+  );
+}
+
+function BorderStyle() {
+  return (
+    <div className="flex w-full">
+      <div className="flex w-1/3">
+        <div className="w-1/3 py-1 bg-secondary" />
+        <div className="w-1/3 py-1 bg-primary-foreground" />
+        <div className="w-1/3 py-1 bg-primary" />
+      </div>
+      <div className="flex w-1/3">
+        <div className="w-1/3 py-1 bg-secondary" />
+        <div className="w-1/3 py-1 bg-primary-foreground" />
+        <div className="w-1/3 py-1 bg-primary" />
+      </div>
+      <div className="flex w-1/3">
+        <div className="w-1/3 py-1 bg-secondary" />
+        <div className="w-1/3 py-1 bg-primary-foreground" />
+        <div className="w-1/3 py-1 bg-primary" />
+      </div>
+    </div>
+  );
+}
+
+export { Footer_C };

package/src/footer_d.tsx

@@ -0,0 +1,154 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Image } from "@stackshift-ui/image";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { SocialIcons } from "@stackshift-ui/social-icons";
+import { Text } from "@stackshift-ui/text";
+
+import { FooterProps } from ".";
+import { logoLink } from "./helper";
+import { Logo, SocialLink, Socials } from "./types";
+
+export default function Footer_D({
+  logo,
+  multipleMenus,
+  copyright,
+  socialMedia,
+  text,
+}: FooterProps) {
+  return (
+    <Section className="py-20 overflow-hidden bg-background">
+      <Container maxWidth={1280}>
+        <Flex wrap className="space-y-4 lg:space-y-0">
+          <div className="w-full max-w-2xl space-y-4 lg:w-1/4">
+            <LogoSection logo={logo} />
+            <TextSection text={text} />
+          </div>
+
+          <MenuSection multipleMenus={multipleMenus} />
+          <SocialMediaContainer socialMedia={socialMedia} />
+        </Flex>
+        <CopyrightSection copyright={copyright} />
+      </Container>
+    </Section>
+  );
+}
+
+function LogoSection({ logo }: { logo?: Logo }) {
+  if (!logo?.image) return null;
+
+  return (
+    <Link
+      className="inline-block text-xl font-bold leading-none"
+      aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
+      href={logoLink(logo)}
+      target={logo?.linkTarget}
+      rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
+      <Image
+        className="h-14"
+        src={`${logo?.image}`}
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+        width={132}
+        height={56}
+        alt={logo?.alt ?? "footer-logo"}
+      />
+    </Link>
+  );
+}
+
+function TextSection({ text }: { text?: string }) {
+  if (!text) return null;
+
+  return (
+    <Text muted className="leading-normal">
+      {text}
+    </Text>
+  );
+}
+
+function CopyrightSection({ copyright }: { copyright?: string }) {
+  if (!copyright) return null;
+
+  return <Text className="pt-10 text-sm">{copyright}</Text>;
+}
+
+function MenuSection({ multipleMenus }: { multipleMenus?: any[] }) {
+  if (!multipleMenus) return null;
+
+  return (
+    <Flex wrap className="flex-grow lg:justify-around" gap={4}>
+      {multipleMenus?.map(menu => <MenuLinks key={menu?._key} menu={menu} />)}
+    </Flex>
+  );
+}
+
+// Individual Menu Links Component
+function MenuLinks({ menu }: { menu?: any }) {
+  if (!menu) return null;
+
+  return (
+    <div className="w-[200px] flex-none">
+      {menu?.title && (
+        <Text weight="bold" className="mb-3">
+          {menu?.title}
+        </Text>
+      )}
+      {menu?.links?.length > 0 && (
+        <Flex as="ul" direction="col" className="space-y-2">
+          {menu?.links?.map((link: any) => (
+            <li key={link?._key}>
+              <Button
+                as="link"
+                link={link}
+                className="text-gray-500 no-underline hover:text-gray-700"
+                ariaLabel={link?.label}>
+                {link?.label}
+              </Button>
+            </li>
+          ))}
+        </Flex>
+      )}
+    </div>
+  );
+}
+
+function SocialMediaContainer({ socialMedia }: { socialMedia?: SocialLink[] }) {
+  if (!socialMedia) return null;
+
+  return (
+    <Flex className="w-full ml-auto lg:justify-end lg:w-1/6">
+      {socialMedia?.map(social => social?.socialMediaLink && <SocialMediaLink social={social} />)}
+    </Flex>
+  );
+}
+
+function SocialMediaLink({ social }: { social?: SocialLink }) {
+  if (!social?.socialMediaLink) return null;
+
+  return (
+    <span key={social?._key}>
+      <Link
+        aria-label={social?.socialMedia || social?.socialMediaPlatform || ""}
+        className="inline-block p-2 mr-2 rounded bg-gray-50 hover:bg-gray-100"
+        target="_blank"
+        rel="noopener noreferrer"
+        href={social?.socialMediaLink}>
+        {social?.socialMediaIcon?.image ? (
+          <Image
+            className="h-6"
+            src={`${social?.socialMediaIcon?.image}`}
+            width={24}
+            height={24}
+            alt={social?.socialMediaIcon?.alt ?? "contact-socialMedia-icon"}
+          />
+        ) : (
+          <SocialIcons social={social?.socialMedia as Socials} />
+        )}
+      </Link>
+    </span>
+  );
+}
+
+export { Footer_D };

package/src/helper/index.tsx

@@ -0,0 +1,15 @@
+import { Logo } from "../types";
+
+// Logo link
+export const logoLink = (logo: Logo) => {
+  if (logo?.internalLink && logo?.type === "linkInternal") {
+    if (logo?.internalLink?.toLowerCase()?.includes("home")) {
+      return "/";
+    }
+    return `/${logo.internalLink}`;
+  } else if (logo?.externalLink && logo?.type === "linkExternal") {
+    return logo?.externalLink ?? "/";
+  } else {
+    return "/";
+  }
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+"use client";
+
+// component exports
+export * from "./footer";
+export * from "./footer_a";
+export * from "./footer_b";
+export * from "./footer_c";
+export * from "./footer_d";

package/src/types.ts

@@ -0,0 +1,412 @@
+export type StyleVariants<T extends string> = Record<T, string>;
+
+export type Socials = "facebook" | "instagram" | "youtube" | "linkedin" | "twitter";
+export interface MainImage {
+  image: string;
+  alt?: string;
+}
+
+export interface LabeledRoute extends ConditionalLink {
+  ariaLabel?: string;
+  label?: string;
+  linkTarget?: string;
+  linkType?: string;
+  _type?: string;
+  linkInternal?: any;
+}
+export interface ConditionalLink {
+  type?: string;
+  internalLink?: string | null;
+  externalLink?: string | null;
+}
+
+export interface StatItems {
+  label?: string;
+  mainImage?: MainImage;
+  value?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface Logo extends ConditionalLink {
+  alt?: string;
+  linkTarget?: string;
+  image?: string;
+}
+
+export interface Images {
+  image?: string;
+  _key?: string;
+  _type?: string;
+  alt?: string;
+}
+
+export interface ContactDetails {
+  addressInfo?: string;
+  contactInfo?: string;
+  emailInfo?: string;
+  _key?: string;
+}
+
+export interface SocialLink {
+  socialMedia?: string | null;
+  socialMediaLink?: string | null;
+  _key?: string | null;
+  _type?: string | null;
+  socialMediaIcon?: {
+    alt?: string;
+    image?: string;
+  } | null;
+  socialMediaPlatform?: string | null;
+}
+
+export interface LabeledRouteWithKey extends LabeledRoute {
+  _key?: string;
+}
+
+export interface ArrayOfImageTitleAndText {
+  mainImage?: {
+    alt?: string;
+    image?: string;
+  };
+  plainText?: string;
+  title?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface FeaturedItem {
+  description?: string;
+  mainImage?: MainImage;
+  title?: string;
+  subtitle?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface ArrayOfTitleAndText {
+  _key?: string;
+  plainText?: string;
+  title?: string;
+}
+
+export interface BlogPost extends SanityBody {
+  authors?: Author[] | null;
+  body?: any;
+  categories?: Category[] | null;
+  excerpt?: string | null;
+  link?: string | null;
+  mainImage?: string | null;
+  publishedAt?: string;
+  seo?: Seo | null;
+  slug?: SanitySlug | null;
+  title?: string;
+}
+
+export interface Seo {
+  _type?: string;
+  seoTitle?: string;
+  seoDescription?: string;
+  seoImage?: string;
+  seoKeywords?: string;
+  seoSynonyms?: string;
+}
+
+export interface SanitySlug {
+  current?: string;
+  _type?: "slug";
+}
+
+export interface SanityBody {
+  _createdAt?: string;
+  _id?: string;
+  _rev?: string;
+  _type?: string;
+  _updatedAt?: string;
+}
+
+export interface Author extends SanityBody {
+  link?: string | null;
+  bio?: string | null;
+  name?: string | null;
+  slug?: SanitySlug | null;
+  image?: string | null;
+  profile?: {
+    alt: string;
+    image: string;
+  } | null;
+}
+
+export interface Category extends SanityBody {
+  title?: string;
+}
+
+export interface Form {
+  id?: string | null;
+  buttonLabel?: string | null;
+  name?: string | null;
+  subtitle?: string | null;
+  fields?: FormFields[] | null;
+  thankYouPage?: ThankYouPage | null;
+}
+
+export interface FormFields {
+  name?: string;
+  placeholder?: string;
+  pricingType?: string;
+  type?: FormTypes;
+  _key?: string;
+  _type?: string;
+  isRequired?: boolean;
+  label?: string;
+  items?: string[];
+}
+
+export type FormTypes =
+  | "inputText"
+  | "inputEmail"
+  | "inputPassword"
+  | "inputNumber"
+  | "textarea"
+  | "inputFile"
+  | "inputRadio"
+  | "inputCheckbox"
+  | "inputSelect";
+
+export interface ThankYouPage {
+  externalLink?: string | null;
+  internalLink?: string | null;
+  linkInternal?: any;
+  linkTarget?: string;
+  linkType?: string;
+  type?: string;
+}
+
+//Used on different sections
+export interface SectionsProps {
+  template?: Template;
+  data?: Sections;
+  variant?: string | null | undefined;
+  schema?: Variants;
+}
+
+export interface Sections extends SanityBody {
+  label?: string;
+  variant?: string;
+  variants?: Variants;
+  _key?: string;
+}
+
+//*EDIT THIS SECTION WHEN CREATING/UPDATING SCHEMAS ON STUDIO */
+export interface Variants {
+  template?: Template;
+  multipleMenus?: any;
+  arrayOfTitleAndText?: ArrayOfTitleAndText[] | null;
+  logo?: Logo | null;
+  primaryButton?: LabeledRoute | null;
+  secondaryButton?: LabeledRoute | null;
+  routes?: LabeledRouteWithKey[] | null;
+  menu?: LabeledRouteWithKey[] | null;
+  plans?: Plans[] | null;
+  formLinks?: LabeledRouteWithKey[] | null;
+  portfolios?: Portfolios[] | null;
+  portfoliosWithCategories?: PortfoliosWithCategories[] | null;
+  length?: number;
+  signInLink?: LabeledRoute | null;
+  signinLink?: LabeledRoute | null;
+  tags?: string[] | null;
+  posts?: BlogPost[] | null;
+  blogsPerPage?: number | null;
+  form?: Form | null;
+  collections?: Collection | null;
+  products?: CollectionProduct | null;
+  allProducts?: Collection[];
+  subtitle?: string | null;
+  caption?: string | null;
+  title?: string | null;
+  plainText?: string | null;
+  contactDescription?: string | null;
+  officeInformation?: string | null;
+  contactEmail?: string | null;
+  contactNumber?: string | null;
+  socialLinks?: SocialLink[] | null;
+  block?: any;
+  heading?: string | null;
+  acceptButtonLabel?: string | null;
+  declineButtonLabel?: string | null;
+  faqsWithCategories?: FaqsWithCategory[] | null;
+  faqs?: AskedQuestion[] | null;
+  arrayOfImageTitleAndText?: ArrayOfImageTitleAndText[] | null;
+  description?: string | null;
+  featuredItems?: FeaturedItem[] | null;
+  images?: Images[] | null;
+  contactDetails?: ContactDetails[] | null;
+  copyright?: string | null;
+  mainImage?: MainImage | null;
+  youtubeLink?: string | null;
+  banner?: any;
+  stats?: StatItems[] | null;
+  teams?: Team[] | null;
+  testimonials?: Testimonial[] | null;
+  selectStripeAccount?: string;
+  annualBilling?: string;
+  monthlyBilling?: string;
+  productDetails?: ProductDetail[];
+  btnLabel?: string;
+  selectAccount?: string;
+  hashtags?: string[];
+  numberOfPosts?: number;
+  text?: string;
+  button?: LabeledRoute;
+  features?: string[];
+  config?: {
+    enableAnalytics: boolean;
+    cookiePolicy?: {
+      siteName: string;
+      cookiePolicyPage: Reference;
+    };
+    consentModalPosition?: string;
+  };
+  contactLink?: LabeledRoute;
+}
+
+export interface Template {
+  bg?: string;
+  color?: string;
+}
+
+export type Plans = {
+  _key?: string | null;
+  _type?: "planItems" | null;
+  checkoutButtonName?: string | null;
+  description?: string | null;
+  monthlyPrice?: string | null;
+  planType?: string | null;
+  yearlyPrice?: string | null;
+  planIncludes?: string[] | null;
+  primaryButton?: LabeledRoute | null;
+} & Record<string, string>;
+
+export interface Portfolios {
+  dateAdded?: string | null;
+  mainImage?: {
+    image?: string | null;
+    alt?: string | null;
+  } | null;
+  primaryButton?: LabeledRoute | null;
+  title?: string | null;
+  _key?: string | null;
+  _type?: string | null;
+}
+
+export interface PortfoliosWithCategories {
+  category?: string | null;
+  content?: Content[] | null;
+  primaryButton?: LabeledRoute | null;
+  _key?: string | null;
+  _type?: string | null;
+}
+
+export interface Content extends Portfolios {
+  description?: string | null;
+  subtitle?: string | null;
+}
+
+export interface Collection extends SanityBody {
+  collectionInfoVariant?: {
+    variant?: string;
+  } | null;
+  name?: string | null;
+  products?: CollectionProduct[] | null;
+  sections?: any; //todo
+  seo?: Seo | null;
+  slug?: SanitySlug | null;
+}
+
+export interface CollectionProduct extends SanityBody {
+  compareToPrice?: number | null;
+  description?: string | null;
+  ecwidProductId?: number | null;
+  name?: string | null;
+  price?: number | null;
+  productInfo?: ProductInfo | null;
+  productInfoVariant?: {
+    variant?: string;
+  } | null;
+  sections?: any; //todo
+  seo?: Seo | null;
+  slug?: SanitySlug | null;
+}
+
+//TODO, RECHECK PRODUCT INFO DATA FROM SANITY
+interface ProductInfo {
+  btnLabel?: string | null;
+  images?: ProductInfoImage[] | null;
+  productDetails?: ProductDetail[] | null;
+  socialLinks?: SocialLink[] | null;
+  subtitle?: string | null;
+}
+
+//TODO, RECHECK PRODUCT INFO DATA FROM SANITY
+export interface ProductDetail {
+  blockContent?: any;
+  contentType?: string;
+  tabName?: string;
+  _key?: string;
+  [key: string]: any;
+}
+interface ProductInfoImage {
+  alt?: string | null;
+  _key: string;
+  _type: string;
+  image?: string | null;
+}
+
+export interface FaqsWithCategory {
+  askedQuestions?: AskedQuestion[] | null;
+  category?: string | null;
+  _key?: string;
+  _type?: string;
+}
+
+export interface AskedQuestion {
+  answer?: string | null;
+  question?: string | null;
+  hidden?: boolean;
+  _key?: string;
+  _type?: string;
+}
+
+export interface Team {
+  jobTitle?: string;
+  mainImage?: MainImage;
+  name?: string;
+  plainText?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface Testimonial {
+  jobTitle?: string;
+  mainImage?: MainImage;
+  name?: string;
+  rating?: string;
+  testimony?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export declare interface Reference {
+  _type: string;
+  _ref: string;
+  _key?: string;
+  _weak?: boolean;
+  _strengthenOnPublish?: {
+    type: string;
+    weak?: boolean;
+    template?: {
+      id: string;
+      params: Record<string, string | number | boolean>;
+    };
+  };
+}