87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { NavLink } from "react-router-dom";
|
|
import { Film, Moon, Settings2, Sun, Video } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
import { useTheme } from "@/hooks/useTheme";
|
|
|
|
function NavItem({
|
|
to,
|
|
label,
|
|
icon,
|
|
isDark,
|
|
}: {
|
|
to: string;
|
|
label: string;
|
|
icon: ReactNode;
|
|
isDark: boolean;
|
|
}) {
|
|
return (
|
|
<NavLink
|
|
to={to}
|
|
className={({ isActive }) =>
|
|
[
|
|
"inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition",
|
|
isActive
|
|
? (isDark ? "bg-zinc-800 text-zinc-50" : "bg-zinc-200 text-zinc-900")
|
|
: (isDark ? "text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50" : "text-zinc-700 hover:bg-zinc-100"),
|
|
].join(" ")
|
|
}
|
|
>
|
|
<span className="inline-flex h-4 w-4 items-center justify-center">{icon}</span>
|
|
<span>{label}</span>
|
|
</NavLink>
|
|
);
|
|
}
|
|
|
|
export default function TopNav() {
|
|
const { isDark, toggleTheme } = useTheme();
|
|
|
|
return (
|
|
<header
|
|
className={[
|
|
"border-b backdrop-blur",
|
|
isDark ? "border-zinc-800 bg-zinc-950/70" : "border-zinc-300 bg-white/90",
|
|
].join(" ")}
|
|
>
|
|
<div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 py-3 md:px-6">
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className={[
|
|
"flex h-9 w-9 items-center justify-center rounded-lg ring-1",
|
|
isDark ? "bg-zinc-900 ring-zinc-800" : "bg-zinc-100 ring-zinc-300",
|
|
].join(" ")}
|
|
>
|
|
<Video className="h-5 w-5" />
|
|
</div>
|
|
<div className="leading-tight">
|
|
<div className="text-sm font-semibold">IPCam Dashboard</div>
|
|
<div className={["text-xs", isDark ? "text-zinc-400" : "text-zinc-500"].join(" ")}>
|
|
MediaMTX + Orange Pi
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex items-center gap-1">
|
|
<NavItem to="/live" label="Live" icon={<Video className="h-4 w-4" />} isDark={isDark} />
|
|
<NavItem to="/playback" label="Playback" icon={<Film className="h-4 w-4" />} isDark={isDark} />
|
|
<NavItem to="/settings" label="Settings" icon={<Settings2 className="h-4 w-4" />} isDark={isDark} />
|
|
<button
|
|
type="button"
|
|
onClick={toggleTheme}
|
|
className={[
|
|
"ml-1 inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition",
|
|
isDark
|
|
? "border-zinc-700 bg-zinc-900/70 text-zinc-100 hover:bg-zinc-800"
|
|
: "border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-100",
|
|
].join(" ")}
|
|
title={isDark ? "Chuyen sang light mode" : "Chuyen sang dark mode"}
|
|
>
|
|
{isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
|
{isDark ? "Light" : "Dark"}
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|