Nav buttons

timmo001 · Sep 3, 2024 · 01d4be4 · 01d4be4
1 parent 5e5ff1f
commit 01d4be4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -36,7 +36,7 @@ export default function RootLayout({
       <body>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <QueryProvider>
-            <main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-sky-500 to-white dark:from-sky-950 dark:to-black">
+            <main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-sky-500 to-white transition-all dark:from-sky-950 dark:to-black">
               <Header />
               {children}
             </main>

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,22 +1,25 @@
-"use client";
-import { useMemo } from "react";
-import { usePathname } from "next/navigation";
 import Link from "next/link";
 
 import { ThemeToggle } from "~/components/theme-toggle";
+import { Button } from "~/components/ui/button";
 
-export function Header() {
-  const pathname = usePathname();
-
-  const isHomePage = useMemo<boolean>(() => pathname === "/", [pathname]);
+const navItems: Array<{
+  label: string;
+  href: string;
+}> = [
+  { label: "Home", href: "/" },
+  { label: "Forecast", href: "/forecast" },
+];
 
+export function Header() {
   return (
     <header className="flex w-full flex-wrap items-center justify-between gap-2 px-3 py-2">
-      <nav className="flex flex-wrap items-center gap-6 delay-200 duration-300 animate-in fade-in">
-        <Link className="ms-2" href="/">
-          Home
-        </Link>
-        <Link href="/forecast">Forecast</Link>
+      <nav className="flex flex-wrap items-center gap-1 delay-200 duration-300 animate-in fade-in">
+        {navItems.map(({ label, href }) => (
+          <Link key={href} href={href}>
+            <Button variant="ghost">{label}</Button>
+          </Link>
+        ))}
       </nav>
       <ThemeToggle />
     </header>