Jose Henrique
ff6670c98c
- Replace React 19 with Preact via @preact/preset-vite (zero component changes needed — Vite aliases react → preact/compat at build time) - Add custom iOS easing curves (ease-ios, ease-spring) via Tailwind @theme - Update all transitions to use iOS-standard 200ms durations and spring/decel easing - Add active:scale press feedback on tiles, buttons, and toggles - Toggle knob now uses spring easing for a satisfying snap Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
26 lines
686 B
TypeScript
26 lines
686 B
TypeScript
|
|
|
|
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-200 ease-ios ${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-200 ease-spring ${checked ? 'translate-x-6' : 'translate-x-0'}`}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ToggleSwitch;
|