Kailasdevdas
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>
|
|
);
|
|
}
|