File size: 2,102 Bytes
f4102c2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | "use client";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { useT } from "@/i18n/context";
import { LanguageToggle } from "@/components/layout/language-toggle";
import { Sun, Moon, Monitor } from "lucide-react";
export function SettingsPanel() {
const { dict } = useT();
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
const options = [
{ v: "light", label: dict.settings.themeLight, icon: Sun },
{ v: "dark", label: dict.settings.themeDark, icon: Moon },
{ v: "system", label: dict.settings.themeSystem, icon: Monitor },
];
return (
<div className="grid gap-6 lg:grid-cols-2">
<Card>
<CardContent className="space-y-3 p-6">
<h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
{dict.settings.language}
</h2>
<LanguageToggle />
</CardContent>
</Card>
<Card>
<CardContent className="space-y-3 p-6">
<h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
{dict.settings.theme}
</h2>
<div className="grid grid-cols-3 gap-2">
{options.map(({ v, label, icon: Icon }) => {
const active = mounted && theme === v;
return (
<button
key={v}
onClick={() => setTheme(v)}
className={`flex flex-col items-center gap-2 rounded-md border p-3 text-sm transition-colors ${
active
? "border-primary bg-primary/10 text-primary"
: "border-border bg-card text-muted-foreground hover:text-foreground"
}`}
>
<Icon className="h-5 w-5" />
{label}
</button>
);
})}
</div>
</CardContent>
</Card>
</div>
);
}
|