fix wheplayer

src/components/TopNav.tsx

@@ -1,15 +1,18 @@
 import { NavLink } from "react-router-dom";
-import { Film, Settings2, Video } from "lucide-react";
+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
@@ -18,8 +21,8 @@ function NavItem({
         [
           "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition",
           isActive
-            ? "bg-zinc-800 text-zinc-50"
-            : "text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50",
+            ? (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(" ")
       }
     >
@@ -30,23 +33,51 @@ function NavItem({
 }
 
 export default function TopNav() {
+  const { isDark, toggleTheme } = useTheme();
+
   return (
-    <header className="border-b border-zinc-800 bg-zinc-950/70 backdrop-blur">
+    <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 bg-zinc-900 ring-1 ring-zinc-800">
+          <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 text-zinc-400">MediaMTX + Orange Pi</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" />} />
-          <NavItem to="/playback" label="Playback" icon={<Film className="h-4 w-4" />} />
-          <NavItem to="/settings" label="Settings" icon={<Settings2 className="h-4 w-4" />} />
+          <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>