83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { Monitor, Moon, Sun } from "lucide-react"
|
|
import { useTranslations } from "next-intl"
|
|
import { useTheme } from "next-themes"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
|
|
type ThemeMode = "system" | "light" | "dark"
|
|
|
|
export function AppearanceSettings() {
|
|
const t = useTranslations("AppearanceSettings")
|
|
const { theme, resolvedTheme, setTheme } = useTheme()
|
|
const resolvedThemeLabel =
|
|
resolvedTheme === "dark"
|
|
? t("resolvedTheme.dark")
|
|
: resolvedTheme === "light"
|
|
? t("resolvedTheme.light")
|
|
: t("resolvedTheme.unknown")
|
|
|
|
return (
|
|
<div className="h-full overflow-auto">
|
|
<div className="w-full space-y-4">
|
|
<section className="rounded-xl border bg-card p-4 space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<Sun className="h-4 w-4 text-muted-foreground" />
|
|
<h2 className="text-sm font-semibold">{t("sectionTitle")}</h2>
|
|
</div>
|
|
|
|
<p className="text-xs text-muted-foreground leading-5">
|
|
{t("sectionDescription")}
|
|
</p>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-medium text-muted-foreground">
|
|
{t("themeMode")}
|
|
</label>
|
|
<Select
|
|
value={theme ?? "system"}
|
|
onValueChange={(value) => setTheme(value as ThemeMode)}
|
|
>
|
|
<SelectTrigger className="w-56">
|
|
<SelectValue placeholder={t("placeholder")} />
|
|
</SelectTrigger>
|
|
<SelectContent align="start">
|
|
<SelectItem value="system">
|
|
<span className="inline-flex items-center gap-2">
|
|
<Monitor className="h-3.5 w-3.5" />
|
|
{t("system")}
|
|
</span>
|
|
</SelectItem>
|
|
<SelectItem value="light">
|
|
<span className="inline-flex items-center gap-2">
|
|
<Sun className="h-3.5 w-3.5" />
|
|
{t("light")}
|
|
</span>
|
|
</SelectItem>
|
|
<SelectItem value="dark">
|
|
<span className="inline-flex items-center gap-2">
|
|
<Moon className="h-3.5 w-3.5" />
|
|
{t("dark")}
|
|
</span>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p
|
|
className="text-[11px] text-muted-foreground"
|
|
suppressHydrationWarning
|
|
>
|
|
{t("currentTheme", { theme: resolvedThemeLabel })}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|