47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Monitor, Moon, Sun } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuLabel,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { tr } from "@/i18n/tr";
|
|
|
|
const OPTIONS = [
|
|
{ value: "light", label: tr.theme.light, icon: Sun },
|
|
{ value: "dark", label: tr.theme.dark, icon: Moon },
|
|
{ value: "system", label: tr.theme.system, icon: Monitor },
|
|
] as const;
|
|
|
|
/** Açık / Koyu / Sistem tema seçici. İkon CSS ile değişir (hydration güvenli). */
|
|
export function ThemeToggle() {
|
|
const { theme, setTheme } = useTheme();
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" aria-label={tr.theme.label}>
|
|
<Sun className="scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" />
|
|
<Moon className="absolute scale-0 rotate-90 transition-transform dark:scale-100 dark:rotate-0" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="min-w-36">
|
|
<DropdownMenuLabel>{tr.theme.label}</DropdownMenuLabel>
|
|
<DropdownMenuRadioGroup value={theme ?? "system"} onValueChange={setTheme}>
|
|
{OPTIONS.map(({ value, label, icon: Icon }) => (
|
|
<DropdownMenuRadioItem key={value} value={value}>
|
|
<Icon />
|
|
{label}
|
|
</DropdownMenuRadioItem>
|
|
))}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|