30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
|
|
import React from 'react';
|
|
import { SunIcon } from './icons/SunIcon';
|
|
import { MoonIcon } from './icons/MoonIcon';
|
|
|
|
interface DarkModeToggleProps {
|
|
isDarkMode: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
export const DarkModeToggle: React.FC<DarkModeToggleProps> = ({ isDarkMode, onToggle }) => {
|
|
return (
|
|
<label htmlFor="dark-mode-toggle" className="flex items-center cursor-pointer" title={isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}>
|
|
<div className="relative">
|
|
<input
|
|
id="dark-mode-toggle"
|
|
type="checkbox"
|
|
className="sr-only"
|
|
checked={isDarkMode}
|
|
onChange={onToggle}
|
|
/>
|
|
<div className="block bg-gray-200 dark:bg-gray-700 w-14 h-8 rounded-full transition-colors"></div>
|
|
<div className={`dot absolute left-1 top-1 bg-white dark:bg-gray-800 border-transparent w-6 h-6 rounded-full transition-transform duration-300 ease-in-out flex items-center justify-center ${isDarkMode ? 'transform translate-x-6' : ''}`}>
|
|
{isDarkMode ? <MoonIcon className="w-4 h-4 text-yellow-300" /> : <SunIcon className="w-4 h-4 text-yellow-500" />}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
);
|
|
};
|