69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { cn } from "@/lib/utils";
|
|
import { RefreshIndicator } from "@/components/refresh-indicator";
|
|
|
|
const tabs = [
|
|
{ href: "/", label: "Dashboard", key: "1" },
|
|
{ href: "/infrastructure", label: "Infrastructure", key: "2" },
|
|
{ href: "/media", label: "Media", key: "3" },
|
|
{ href: "/automations", label: "Automations", key: "4" },
|
|
{ href: "/expenses", label: "Expenses", key: "5" },
|
|
{ href: "/network", label: "Network", key: "6" },
|
|
{ href: "/logs", label: "Logs", key: "7" },
|
|
];
|
|
|
|
export function Nav() {
|
|
const pathname = usePathname();
|
|
const today = new Date().toLocaleDateString("en-US", {
|
|
weekday: "long",
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 border-b border-white/[0.05] bg-white/[0.02] backdrop-blur-xl">
|
|
<div className="flex items-center justify-between px-6 h-14">
|
|
<div className="flex items-center gap-6">
|
|
<Link href="/" className="flex items-center gap-2 group">
|
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 via-violet-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm animate-logo-float shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/40 transition-shadow">
|
|
H
|
|
</div>
|
|
<span className="font-semibold text-foreground hidden sm:inline">Homelab</span>
|
|
</Link>
|
|
<div className="flex items-center gap-1">
|
|
{tabs.map((tab) => {
|
|
const isActive =
|
|
tab.href === "/"
|
|
? pathname === "/"
|
|
: pathname.startsWith(tab.href);
|
|
return (
|
|
<Link
|
|
key={tab.href}
|
|
href={tab.href}
|
|
className={cn(
|
|
"px-3 py-1.5 text-xs lg:text-sm rounded-lg transition-all duration-200 relative whitespace-nowrap",
|
|
isActive
|
|
? "text-foreground bg-white/[0.06] backdrop-blur-sm"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-white/[0.04]"
|
|
)}
|
|
>
|
|
{tab.label}
|
|
<span className="ml-0.5 text-[8px] text-muted-foreground/40 hidden lg:inline">{tab.key}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-muted-foreground/70 hidden md:inline">{today}</span>
|
|
<RefreshIndicator />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|