introduce third slot to footer

Author: bmuenzenmeyer

packages/ui-components/src/Containers/Footer/index.module.css

@@ -9,13 +9,24 @@
     border-neutral-200
     bg-white
     py-4
+    text-neutral-500
     sm:px-8
-    md:flex-row
     md:justify-between
     md:py-5
     dark:border-neutral-900
     dark:bg-neutral-950;
 
+  .row {
+    @apply flex
+      flex-col
+      items-center
+      gap-6
+      md:flex-row
+      md:justify-between
+      md:gap-0
+      md:self-stretch;
+  }
+
   .sectionPrimary {
     @apply flex
       flex-wrap
@@ -43,4 +54,27 @@
         gap-1;
     }
   }
+
+  .legal {
+    @apply flex
+      flex-col
+      gap-2
+      px-4
+      text-center
+      text-xs
+      text-balance
+      md:px-14;
+
+    p {
+      @apply text-center
+          text-sm
+          text-neutral-800
+          dark:text-neutral-500;
+    }
+
+    a {
+      @apply text-green-600
+          dark:text-green-400;
+    }
+  }
 }

packages/ui-components/src/Containers/Footer/index.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 import NavItem from '#ui/Containers/NavBar/NavItem';
 import {
   Bluesky,
@@ -38,6 +40,7 @@ type Navigation = {
 type ExtraNavigationSlots = {
   primary?: ReactNode;
   secondary?: ReactNode;
+  legal?: ReactNode;
 };
 
 type FooterProps = {
@@ -53,56 +56,34 @@ const Footer: FC<FooterProps> = ({
   navigation,
   slots,
 }) => {
-  const openJSlink = navigation.footerLinks.at(-1)!;
-
   return (
     <footer className={styles.footer}>
-      <div className={styles.sectionPrimary}>
-        {slots?.primary}
-
-        {navigation.footerLinks.slice(0, -1).map(item => (
-          <NavItem
-            key={item.link}
-            type="footer"
-            href={item.link}
-            as={as}
-            pathname={pathname}
-          >
-            {item.text}
-          </NavItem>
-        ))}
-      </div>
-
-      <div className={styles.sectionSecondary}>
-        {slots?.secondary}
+      <div className={styles.row}>
+        <div className={styles.sectionPrimary}>{slots?.primary}</div>
 
-        <NavItem
-          type="footer"
-          href={openJSlink.link}
-          as={as}
-          pathname={pathname}
-        >
-          &copy; {openJSlink.text}
-        </NavItem>
+        <div className={styles.sectionSecondary}>
+          {slots?.secondary}
 
-        <div className={styles.social}>
-          {navigation.socialLinks.map(link => {
-            const SocialIcon = footerSocialIcons[link.icon];
+          <div className={styles.social}>
+            {navigation.socialLinks.map(link => {
+              const SocialIcon = footerSocialIcons[link.icon];
 
-            return (
-              <NavItem
-                key={link.icon}
-                href={link.link}
-                type="footer"
-                as={as}
-                pathname={pathname}
-              >
-                <SocialIcon width={20} height={20} aria-label={link.link} />
-              </NavItem>
-            );
-          })}
+              return (
+                <NavItem
+                  key={link.icon}
+                  href={link.link}
+                  type="footer"
+                  as={as}
+                  pathname={pathname}
+                >
+                  <SocialIcon width={20} height={20} aria-label={link.link} />
+                </NavItem>
+              );
+            })}
+          </div>
         </div>
       </div>
+      <div className={classNames(styles.row, styles.legal)}>{slots?.legal}</div>
     </footer>
   );
 };