Lego/custompage header footer (#44)

* chore: rename HeaderLink as SocialLink, used by Footer and Header

* chore: footer has same size than header for consistency

* chore: include header & footer in custom page

* fix(footer): allow click on links

src/app/[slug]/client-page.tsx

@@ -3,45 +3,53 @@ import { urlForImage } from "@/sanity/lib/image";
 import type { Image } from "sanity";
 
 import { Hero } from "@/sections/Hero/Hero";
+import { Footer } from "@/components/Footer/Footer";
+import { Header } from "@/components/Header/Header";
 import { getMetaData, getViewports } from "@/lib/metadata";
 
 export const generateMetadata = () => getMetaData({});
 
 export const generateViewport = getViewports;
 
 export default function Page({ page }: { page: PageType }) {
+  const hasNavbar = page?.navbar;
+  const hasFooter = page?.footer;
   return (
-    <div>
-      {page.sections?.map((section, idx) => {
-        if (section?.__typename == "Hero") {
-          console.log("ATTRIBUTES", section.customAttributes);
-          return (
-            <div key={idx}>
-              <Hero
-                title={section.heading ?? ""}
-                description={section.tagline ?? ""}
-                cta={{
-                  url: section.actions?.[0]?.url ?? "",
-                  text: section.actions?.[0]?.text ?? "",
-                }}
-                image={{
-                  src: section?.image?.asset
-                    ? urlForImage(section.image.asset as unknown as Image)
-                    : "",
-                  name:
-                    section.customAttributes
-                      ?.filter(Boolean)
-                      .find((ca) => ca?.name === "name")?.value ?? "",
-                  place:
-                    section.customAttributes
-                      ?.filter(Boolean)
-                      .find((ca) => ca?.name === "location")?.value ?? "",
-                }}
-              />
-            </div>
-          );
-        }
-      })}
-    </div>
+    <>
+      {hasNavbar ? <Header /> : null}
+      <div className="md:min-h-[calc(100vh_-_390px)]">
+        {page.sections?.map((section, idx) => {
+          if (section?.__typename == "Hero") {
+            console.log("ATTRIBUTES", section.customAttributes);
+            return (
+              <div key={idx}>
+                <Hero
+                  title={section.heading ?? ""}
+                  description={section.tagline ?? ""}
+                  cta={{
+                    url: section.actions?.[0]?.url ?? "",
+                    text: section.actions?.[0]?.text ?? "",
+                  }}
+                  image={{
+                    src: section?.image?.asset
+                      ? urlForImage(section.image.asset as unknown as Image)
+                      : "",
+                    name:
+                      section.customAttributes
+                        ?.filter(Boolean)
+                        .find((ca) => ca?.name === "name")?.value ?? "",
+                    place:
+                      section.customAttributes
+                        ?.filter(Boolean)
+                        .find((ca) => ca?.name === "location")?.value ?? "",
+                  }}
+                />
+              </div>
+            );
+          }
+        })}
+      </div>
+      {hasFooter ? <Footer /> : null}
+    </>
   );
 }

src/components/Footer/Footer.tsx

@@ -1,18 +1,18 @@
 import { ExternalLink } from "lucide-react";
 
-import { HeaderLink } from "@/components/Header/HeaderLink";
 import { Logo } from "@/components/Icons/Logo";
 import { Title } from "@/components/Icons/Title";
 import { Link } from "@/components/Link";
+import { SocialLink } from "@/components/SocialLink/SocialLink";
 import { footer, links } from "@/lib/data";
 import { theme } from "@/lib/theme";
 
 export function Footer() {
   return (
     <footer className="relative z-10 font-barlow text-white before:absolute before:inset-0 before:z-10 before:w-[80%] before:bg-gradient-to-r before:from-jsconf-yellow before:via-jsconf-yellow before:to-transparent before:opacity-10 before:content-[''] before:md:w-[60%] before:md:from-transparent before:md:via-jsconf-yellow">
-      <div className="mx-6 flex flex-col before:top-0 before:h-0.5 before:w-full before:bg-gradient-to-r before:from-transparent before:from-10% before:via-jsconf-yellow before:via-50% before:to-transparent before:to-90% before:content-[''] lg:mx-auto lg:w-11/12 xl:w-8/12">
+      <div className="flex max-w-[1136px] flex-col p-4 pt-0 before:top-0 before:h-0.5 before:w-full before:bg-gradient-to-r before:from-transparent before:from-10% before:via-jsconf-yellow before:via-50% before:to-transparent before:to-90% before:content-[''] lg:mx-auto">
         <div className="flex w-full flex-col gap-8 py-14">
-          <div className="grid grid-cols-1 gap-6 px-6 lg:grid-cols-8 lg:gap-8 lg:px-0">
+          <div className="z-10 grid grid-cols-1 gap-6 px-6 lg:grid-cols-8 lg:gap-8 lg:px-0">
             <div className="col-span-1 flex flex-col items-center gap-4 lg:col-span-2 lg:items-start">
               <div className="flex">
                 <a href="/" className="flex items-center gap-3">
@@ -24,7 +24,7 @@ export function Footer() {
                 <span>Siguenos: </span>
                 <div className="ml-2 flex items-center gap-1">
                   {links.map((link) => (
-                    <HeaderLink key={link.id} link={link} />
+                    <SocialLink key={link.id} link={link} />
                   ))}
                 </div>
               </div>

src/components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 
-import { HeaderLink } from "@/components/Header/HeaderLink";
 import { Logo } from "@/components/Icons/Logo";
+import { SocialLink } from "@/components/SocialLink/SocialLink";
 import { links } from "@/lib/data";
 import { theme } from "@/lib/theme";
 
@@ -13,7 +13,7 @@ export function Header() {
       </Link>
       <div className="flex items-center gap-6">
         {links.map((link) => (
-          <HeaderLink key={link.id} link={link} />
+          <SocialLink key={link.id} link={link} />
         ))}
       </div>
     </header>

src/components/Header/HeaderLink.tsx → src/components/SocialLink/SocialLink.tsx

@@ -1,14 +1,12 @@
 import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
 
-export function HeaderLink({
+export function SocialLink({
   link: { id, url },
 }: {
   link: { id: string; url: string };
 }) {
   return (
     <a
-      key={id}
-      id={id}
       href={url}
       className="rounded-full p-2 hover:bg-[#EDE06033]"
       target="_blank"