import { cn } from "@/shared/lib/cn"; import { Separator } from "@/shared/ui/separator"; import { ToggleGroup, ToggleGroupItem } from "@/shared/ui/toggle-group"; import { useTheme } from "@/shared/theme/ThemeProvider"; import { Sun, Moon, Monitor, Check } from "lucide-react"; import { useTranslation } from "react-i18next"; const THEME_OPTIONS = [ { value: "light", icon: Sun }, { value: "dark", icon: Moon }, { value: "system", icon: Monitor }, ] as const; const ACCENT_COLORS = [ { name: "blue", value: "#3b82f6" }, { name: "cyan", value: "#06b6d4" }, { name: "green", value: "#22c55e" }, { name: "orange", value: "#f97316" }, { name: "red", value: "#ef4444" }, { name: "pink", value: "#ec4899" }, { name: "purple", value: "#a855f7" }, { name: "indigo", value: "#6366f1" }, ]; const DENSITY_OPTIONS = [ { value: "compact" }, { value: "comfortable" }, { value: "spacious" }, ] as const; function SettingRow({ label, description, children, }: { label: string; description?: string; children: React.ReactNode; }) { return (

{label}

{description && (

{description}

)}

{children}

); } export function AppearanceSettings() { const { t } = useTranslation("settings"); const { theme, setTheme, accentColor, setAccentColor, density, setDensity } = useTheme(); return (

{t("appearance.title")}

v && setTheme(v as typeof theme)} className="gap-1 rounded-lg bg-muted p-1" > {THEME_OPTIONS.map((option) => ( {t(`appearance.theme.options.${option.value}`)} ))}

{ACCENT_COLORS.map((color) => ( ))}

v && setDensity(v as typeof density)} className="gap-1 rounded-lg bg-muted p-1" > {DENSITY_OPTIONS.map((option) => ( {t(`appearance.density.options.${option.value}`)} ))}

); }