Close #158, added Footer component that correctly anchors to bottom o…

…f all routes.
penumbra-zone · Aug 31, 2024 · 06e7e6c · 06e7e6c
1 parent 8ad9656
commit 06e7e6c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -6,8 +6,7 @@ import "@/lib/patch-toJSON-BigInt";
 import { Navbar } from "@/components/Navbar";
 import Providers from "@/components/Providers";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { TwitterIcon, BookIcon, GitPullRequestIcon, MessageSquareIcon } from "lucide-react";
-import Link from "next/link";
+import { Footer } from "@/components/Footer";
 
 export const metadata: Metadata = {
   title: "Cuiloa",
@@ -29,28 +28,15 @@ export default function RootLayout({
       // Necessary for next-themes: https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
       suppressHydrationWarning
     >
-      <body className="bg-gradient-repeat-radial min-w-full min-h-screen">
+      <body className="bg-gradient-repeat-radial min-w-full min-h-screen flex flex-col w-full">
         <Providers>
           <Navbar />
-          <div className="container xs-container justify-start min-h-[640px]">
+          <div className="container xs-container justify-start min-h-[640px] grow">
             {children}
           </div>
           <ReactQueryDevtools initialIsOpen={false} />
         </Providers>
-        <div className="flex justify-center items-center h-28 gap-3">
-          <Link href="https://discord.gg/penumbrazone" title="The Official Penumbra Discord">
-            <MessageSquareIcon className="w-4" />
-          </Link>
-          <Link href="https://guide.penumbra.zone/" title="Penumbra User Guide">
-            <BookIcon className="w-4" />
-          </Link>
-          <Link href="https://github.com/penumbra-zone/cuiloa" title="Cuiloa Source Code">
-            <GitPullRequestIcon className="w-4" />
-          </Link>
-          <Link href="https://twitter.com/penumbrazone" title="Penumbra's Twitter">
-            <TwitterIcon className="w-4" />
-          </Link>
-        </div>
+        <Footer />
       </body>
     </html>
   );

diff --git a/apps/web/src/components/Footer/index.tsx b/apps/web/src/components/Footer/index.tsx
@@ -0,0 +1,39 @@
+import {
+  BookIcon,
+  GitPullRequestIcon,
+  MessageSquareIcon,
+  TwitterIcon,
+} from "lucide-react";
+import { FC } from "react";
+import Link from "next/link";
+
+export const Footer: FC = () => {
+  return (
+    <footer className="flex justify-center items-center h-28 gap-3">
+      <Link
+        href="https://discord.gg/penumbrazone"
+        title="The Official Penumbra Discord"
+      >
+        <MessageSquareIcon className="w-4" />
+      </Link>
+      <Link
+        href="https://guide.penumbra.zone/"
+        title="Penumbra User Guide"
+      >
+        <BookIcon className="w-4" />
+      </Link>
+      <Link
+        href="https://github.com/penumbra-zone/cuiloa"
+        title="Cuiloa Source Code"
+      >
+        <GitPullRequestIcon className="w-4" />
+      </Link>
+      <Link
+        href="https://twitter.com/penumbrazone"
+        title="Penumbra's Twitter"
+      >
+        <TwitterIcon className="w-4" />
+      </Link>
+    </footer>
+  );
+};
diff --git a/apps/web/src/components/Navbar/index.tsx b/apps/web/src/components/Navbar/index.tsx
@@ -132,7 +132,7 @@ const Breadcrumbs : FC<{ pathName: string }>= ({ pathName }) => {
 export const Navbar: FC = () => {
   const pathName = usePathname();
   return (
-    <div className="flex flex-wrap justify-between items-center px-4 py-8 sm:px-8 sm:py-16 sm:gap-2 gap-0 max-w-[1400px] mx-auto">
+    <div className="flex flex-wrap justify-between items-center px-4 py-8 sm:px-8 sm:py-16 sm:gap-2 gap-0 max-w-[1400px] mx-auto w-full">
       <div className="flex flex-wrap grow items-center sm:w-auto w-2/3">
         <Link href="https://radiantcommons.com">
           <RadiantLogoDark className="sm:w-12 sm:h-12 w-9 h-9 dark:block hidden" />