Luca Sacchi Ricciardi
d222d21618
- Update README.md with v0.4.0 features and screenshots placeholders - Update architecture.md with v0.4.0 implementation status - Update progress.md marking all 27 tasks as completed - Create CHANGELOG.md with complete release notes - Add v0.4.0 frontend components and hooks
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { Moon, Sun, Monitor } from 'lucide-react';
|
|
import { useTheme } from '@/hooks/useTheme';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
|
|
export function ThemeToggle() {
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Button variant="ghost" size="icon" className="h-9 w-9">
|
|
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
<span className="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => setTheme('light')} className={theme === 'light' ? 'bg-accent' : ''}>
|
|
<Sun className="mr-2 h-4 w-4" />
|
|
Light
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('dark')} className={theme === 'dark' ? 'bg-accent' : ''}>
|
|
<Moon className="mr-2 h-4 w-4" />
|
|
Dark
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('system')} className={theme === 'system' ? 'bg-accent' : ''}>
|
|
<Monitor className="mr-2 h-4 w-4" />
|
|
System
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|