All files / src/components DarkModeToggle.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
 
 
 
 
 
 
 
 
1x
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// 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>
  );
};