Spaces:
Running
Running
File size: 3,402 Bytes
9243cff 733e57b 9243cff |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
"use client"
import { Button } from "@/components/ui/button"
import { Moon, Sun, Home, ArrowUpDown, Info } from "lucide-react"
import { useTheme } from "next-themes"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
export function Navigation() {
const { theme, setTheme } = useTheme()
const pathname = usePathname()
const navItems = [
{
href: "/",
label: "Home",
icon: Home,
isActive: pathname === "/"
},
{
href: "/analytics",
label: "Analytics",
icon: ArrowUpDown,
isActive: pathname === "/analytics"
},
{
href: "/about",
label: "About",
icon: Info,
isActive: pathname === "/about"
}
]
return (
<header className="border-b bg-card">
<div className="container mx-auto px-4 sm:px-6 py-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
{/* Logo and branding */}
<div className="flex items-center gap-4">
{/* Logo */}
<Link href="/" className="flex-shrink-0">
<img
src="https://evalevalai.com/assets/img/logo-square.png"
alt="EvalEval Logo"
className="w-10 h-10 rounded-lg hover:scale-105 transition-transform"
/>
</Link>
{/* App title and description */}
<div>
<Link href="/" className="block group">
<h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground group-hover:text-primary transition-colors">
AI Eval Dashboard
</h1>
</Link>
<p className="text-sm text-muted-foreground">
AI evaluation documentation platform
</p>
</div>
</div>
{/* Navigation and actions */}
<div className="flex items-center gap-2 sm:gap-3">
{/* Navigation links */}
<nav className="flex items-center gap-1">
{navItems.map((item) => (
<Link key={item.href} href={item.href}>
<Button
variant={item.isActive ? "default" : "ghost"}
size="sm"
className={cn(
"gap-2",
item.isActive && "bg-primary text-primary-foreground"
)}
>
<item.icon className="h-4 w-4" />
<span className="hidden sm:inline">{item.label}</span>
</Button>
</Link>
))}
</nav>
{/* Separator */}
<div className="w-px h-6 bg-border" />
{/* Theme toggle */}
<Button
variant="ghost"
size="sm"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="h-9 w-9 p-0"
>
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</div>
</div>
</div>
</header>
)
}
|