feat: add Footer section

Author: babblebey

app/(www)/layout.tsx

@@ -1,5 +1,7 @@
-import { MainNav } from "@/components/main-nav";
 import { navConfig } from "@/config/nav";
+import { siteConfig } from "@/config/site";
+import { MainNav } from "@/components/main-nav";
+import { Footer } from "@/components/footer";
 
 interface IndexPageLayoutProps {
   children: React.ReactNode
@@ -12,6 +14,7 @@ export default async function IndexPageLayout({ children }: IndexPageLayoutProps
       <main className="container max-w-6xl px-4 sm:px-8">
         {children}
       </main>
+      <Footer {...siteConfig} />
     </div>
   )
 }

components/footer.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Icons } from "@/components/icons";
+import { Capitalise } from "@/components/capitalise";
+import { buttonVariants } from "@/components/ui/button";
+import { getAProblemFirstQuote } from "@/data/problem-first-quote";
+import type { SiteConfig } from "@/types";
+
+interface FooterProps extends SiteConfig {}
+
+export function Footer({ title, author, links }: FooterProps) {
+  return(
+    <footer>
+      <div className="container max-w-6xl px-4 sm:px-8 space-y-10 pb-10">
+        <div className="border-t w-full" />
+
+        <div className="flex flex-col lg:flex-row lg:justify-between gap-10">
+          <div className="space-y-4 max-w-lg">
+            <Link href="/" className="flex items-center space-x-2">
+              <Icons.logo className="w-9 h-9 dark:invert" />
+              <span className="flex flex-col justify-end">
+                <span className="font-bold">
+                  { title }
+                </span>
+                <span className="text-xs opacity-50">
+                  /@{ author }
+                </span>
+              </span>
+            </Link>
+            <p>{ getAProblemFirstQuote() }</p>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-lg md:text-2xl font-semibold leading-none tracking-tight">
+              Connect with me
+            </h3>
+            <div className="flex flex-wrap gap-2">
+              {Object.keys(links).map((key, index) => {
+                const Icon = Icons[key as keyof typeof Icons];
+                const link = links[key as keyof typeof links];
+                return (
+                  <Link key={index} href={link} target="_blank" className={cn(buttonVariants({ variant: "outline" }), "gap-2")}>
+                    <Icon className="w-4 h-4" /> <Capitalise text={key} />
+                  </Link>
+                )}
+              )}
+            </div>
+          </div>
+        </div>
+
+        <p className="text-sm text-muted-foreground">© { (new Date).getFullYear() } { title }.</p>
+      </div>
+    </footer>
+  )
+}

data/problem-first-quote.ts

@@ -0,0 +1,12 @@
+import type { Quote } from "@/types";
+
+export const quotes: Quote[] = [
+  "In the realm of software development, the true brilliance lies not in chasing shiny stacks or tools, but in embracing problem-solving as our guiding light. Innovation flourishes when we channel our energy into crafting solutions that stand the test of challenges.",
+  "In software devlopment, it's problem-solving that illuminates the path, not the allure of shiny stacks. Solutions reign supreme over trends.",
+  "In software engineering, problem-solving shines brighter than trendy tools. Solutions outlast the trends and hype."
+];
+
+export const getAProblemFirstQuote = (quoteList: Quote[] = quotes): string => {
+  const idx = Math.floor(Math.random() * quoteList.length);
+  return quoteList[idx];
+}

types/index.d.ts

@@ -24,4 +24,6 @@ export type SiteConfig = {
 
 export type NavConfig = {
   items: MainNavItem[]
-}
+}
+
+export type Quote = string