33 lines
804 B
TypeScript
33 lines
804 B
TypeScript
|
import { Moon, Sun } from 'lucide-react';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
|
||
|
|
export function ThemeToggle({
|
||
|
|
isDark,
|
||
|
|
onToggle,
|
||
|
|
className = '',
|
||
|
|
}: {
|
||
|
|
isDark: boolean;
|
||
|
|
onToggle: () => void;
|
||
|
|
className?: string;
|
||
|
|
}) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onToggle}
|
||
|
|
className={[
|
||
|
|
'inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-bg text-fg transition-colors hover:bg-bg-muted',
|
||
|
|
className,
|
||
|
|
].join(' ')}
|
||
|
|
aria-label={isDark ? t('theme.switchToLight') : t('theme.switchToDark')}
|
||
|
|
>
|
||
|
|
{isDark ? (
|
||
|
|
<Sun className="h-5 w-5" aria-hidden="true" />
|
||
|
|
) : (
|
||
|
|
<Moon className="h-5 w-5" aria-hidden="true" />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|