36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
|
import {useState, useEffect} from "react";
|
||
|
|
import {useAuth} from "@/context/AuthContext";
|
||
|
|
import {Button} from "@/components/ui/button";
|
||
|
|
import {Switch} from "@/components/ui/switch";
|
||
|
|
import {log} from "console";
|
||
|
|
|
||
|
|
export default function Header() {
|
||
|
|
const {user, logout} = useAuth();
|
||
|
|
const [darkMode, setDarkMode] = useState<boolean>(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (darkMode) document.documentElement.classList.add("dark");
|
||
|
|
else document.documentElement.classList.remove("dark");
|
||
|
|
}, [darkMode]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="border-b bg-card">
|
||
|
|
<div className="flex items-center justify-between px-6 h-16">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-muted-foreground">Welcome back</p>
|
||
|
|
<p className="font-semibold">{user?.username}</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-sm">Dark</span>
|
||
|
|
<Switch checked={darkMode} onCheckedChange={setDarkMode} />
|
||
|
|
</div>
|
||
|
|
<Button variant="destructive" onClick={logout}>
|
||
|
|
Logout
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|