40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
// src/components/DarkModeToggle.tsx
|
|
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>
|
|
);
|
|
};
|