44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { Monitor, Moon, Sun } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { useTheme } from "../theme/use-theme";
|
|
import type { Theme } from "../theme/theme";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const OPTIONS: { value: Theme; Icon: typeof Sun }[] = [
|
|
{ value: "light", Icon: Sun },
|
|
{ value: "dark", Icon: Moon },
|
|
{ value: "system", Icon: Monitor },
|
|
];
|
|
|
|
export function ThemeSwitch() {
|
|
const { t } = useTranslation();
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
return (
|
|
<div className="flex gap-1">
|
|
{OPTIONS.map(({ value, Icon }) => {
|
|
const active = theme === value;
|
|
return (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => setTheme(value)}
|
|
aria-pressed={active}
|
|
aria-label={t(`theme.${value}`)}
|
|
title={t(`theme.${value}`)}
|
|
className={cn(
|
|
"rounded-md p-1 transition-colors",
|
|
active
|
|
? "bg-accent text-foreground"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" aria-hidden />
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|