mirror of
https://github.com/torrentpier/torrentpier
synced 2025-07-08 05:51:14 -07:00
dbbc31b519
* feat: initialize Laravel project with React 19 starter kit - Add Laravel backend with Inertia.js integration - Set up React 19 with TypeScript frontend - Configure shadcn/ui component library - Add Vite build tooling and development setup - Include authentication scaffolding with Inertia - Set up responsive layouts and UI components * Potential fix for code scanning alert no. 595: Workflow does not contain permissions Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
|
import { useAppearance } from '@/hooks/use-appearance';
|
|
import { Monitor, Moon, Sun } from 'lucide-react';
|
|
import { HTMLAttributes } from 'react';
|
|
|
|
export default function AppearanceToggleDropdown({ className = '', ...props }: HTMLAttributes<HTMLDivElement>) {
|
|
const { appearance, updateAppearance } = useAppearance();
|
|
|
|
const getCurrentIcon = () => {
|
|
switch (appearance) {
|
|
case 'dark':
|
|
return <Moon className="h-5 w-5" />;
|
|
case 'light':
|
|
return <Sun className="h-5 w-5" />;
|
|
default:
|
|
return <Monitor className="h-5 w-5" />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={className} {...props}>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-md">
|
|
{getCurrentIcon()}
|
|
<span className="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => updateAppearance('light')}>
|
|
<span className="flex items-center gap-2">
|
|
<Sun className="h-5 w-5" />
|
|
Light
|
|
</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => updateAppearance('dark')}>
|
|
<span className="flex items-center gap-2">
|
|
<Moon className="h-5 w-5" />
|
|
Dark
|
|
</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => updateAppearance('system')}>
|
|
<span className="flex items-center gap-2">
|
|
<Monitor className="h-5 w-5" />
|
|
System
|
|
</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
);
|
|
}
|