init

components/ToggleSwitch.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ checked, onChange }) => {
+  const handleToggle = () => {
+    onChange(!checked);
+  };
+
+  return (
+    <div 
+      className={`w-14 h-8 flex items-center rounded-full p-1 cursor-pointer transition-colors duration-300 ${checked ? 'bg-cyan-500' : 'bg-gray-600'}`}
+      onClick={handleToggle}
+    >
+      <div 
+        className={`bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-300 ${checked ? 'translate-x-6' : 'translate-x-0'}`}
+      />
+    </div>
+  );
+};
+
+export default ToggleSwitch;