Function Toggle

components/SettingsModal.tsx:572–602

({ 
  enabled, 
  onToggle,
  isDarkMode 
}: { 
  enabled: boolean; 
  onToggle: (value: boolean) => void;
  isDarkMode: boolean;
})

// Toggle Switch Component
function Toggle({ 
  enabled, 
  onToggle,
  isDarkMode 
}: { 
  enabled: boolean; 
  onToggle: (value: boolean) => void;
  isDarkMode: boolean;
}) {
  return (
    <button
      onClick={() => onToggle(!enabled)}
      className={`
        relative w-16 h-9 rounded-full transition-colors duration-200 flex-shrink-0
        ${enabled 
          ? "bg-blue-500" 
          : isDarkMode ? "bg-white/20" : "bg-black/20"
        }
      `}
      aria-label={enabled ? "Disable" : "Enable"}
    >
      <div
        className={`
          absolute top-1 w-7 h-7 rounded-full bg-white shadow-md
          transition-transform duration-200
          ${enabled ? "translate-x-8" : "translate-x-1"}
        `}
      />
    </button>
  );
}

function CloseIcon({ className }: { className?: string }) {
  return (