imported files from google gemini ai BUILD env

components/DarkModeToggle.tsx

@@ -0,0 +1,29 @@
+
+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>
+  );
+};