mirror of
https://github.com/yusufipk/OpenFrame.git
synced 2026-09-11 09:36:08 +00:00
yusufipek
2bc07c47e6
The menu had no inner padding, so the first row's icon sat flush against the popover border and the whole box read as clipped under the header. It now carries the same padding, offset and fixed width as the account menu next to it, and the System row uses a lucide icon instead of a colour emoji that broke the icon column's alignment.
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Monitor, Moon, Sun } from 'lucide-react';
|
|
import { useTheme } from 'next-themes';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
|
|
export function ThemeToggle() {
|
|
const { setTheme } = useTheme();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="relative">
|
|
<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"
|
|
sideOffset={10}
|
|
className="w-40 min-w-40 rounded-md border p-1"
|
|
>
|
|
<DropdownMenuItem onClick={() => setTheme('light')}>
|
|
<Sun />
|
|
Light
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('dark')}>
|
|
<Moon />
|
|
Dark
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('system')}>
|
|
<Monitor />
|
|
System
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|