50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { MoonStarIcon, MonitorCogIcon, SunMediumIcon } from "lucide-react";
|
|
import { useTheme } from "@/components/theme-provider";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuLabel,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
|
|
const themeOptions = [
|
|
{ value: "light", label: "Light", icon: SunMediumIcon },
|
|
{ value: "dark", label: "Dark", icon: MoonStarIcon },
|
|
{ value: "system", label: "System", icon: MonitorCogIcon },
|
|
] as const;
|
|
|
|
export function ThemeMenu() {
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger aria-label="Thema kiezen">
|
|
<MonitorCogIcon className="size-4" />
|
|
<span className="hidden sm:inline">Theme</span>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuLabel>Weergave</DropdownMenuLabel>
|
|
<DropdownMenuRadioGroup value={theme ?? "system"} onValueChange={setTheme}>
|
|
{themeOptions.map((option) => {
|
|
const OptionIcon = option.icon;
|
|
|
|
return (
|
|
<DropdownMenuRadioItem
|
|
key={option.value}
|
|
value={option.value}
|
|
closeOnClick
|
|
>
|
|
<OptionIcon className="size-4" />
|
|
{option.label}
|
|
</DropdownMenuRadioItem>
|
|
);
|
|
})}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|