Files
meditation-admin/components/ThemeToggle.tsx
T
2026-08-21 10:18:18 +03:30

34 lines
757 B
TypeScript

"use client";
import { useTheme } from "@/lib/theme";
import { SunIcon, MoonIcon, MonitorIcon } from "./icons";
const LABELS = {
light: "حالت روشن",
dark: "حالت تاریک",
system: "حالت سیستم",
};
const ICONS = {
light: SunIcon,
dark: MoonIcon,
system: MonitorIcon,
};
export function ThemeToggle({ className }: { className?: string }) {
const { theme, toggle } = useTheme();
const Icon = ICONS[theme];
return (
<button
type="button"
onClick={toggle}
aria-label={LABELS[theme]}
title={LABELS[theme]}
className={`rounded-lg p-2 text-muted transition hover:bg-surface-muted hover:text-foreground ${className ?? ""}`}
>
<Icon className="h-5 w-5" />
</button>
);
}