76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
|
|
interface ToggleProps {
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
label: string;
|
|
description?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Toggle switch component with Framer Motion animation.
|
|
* Used for boolean settings/preferences.
|
|
*/
|
|
export default function Toggle({
|
|
checked,
|
|
onChange,
|
|
label,
|
|
description,
|
|
disabled = false,
|
|
}: ToggleProps) {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<label className={`flex items-start justify-between cursor-pointer py-3 border-b border-charcoal-outline/50 last:border-b-0 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}>
|
|
<div className="flex-1 pr-4">
|
|
<span className="text-gray-200 font-medium">{label}</span>
|
|
{description && (
|
|
<p className="text-sm text-gray-500 mt-0.5">{description}</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
onClick={() => !disabled && onChange(!checked)}
|
|
disabled={disabled}
|
|
className={`relative w-12 h-6 rounded-full transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-primary-blue/50 ${
|
|
checked
|
|
? 'bg-primary-blue'
|
|
: 'bg-iron-gray'
|
|
} ${disabled ? 'cursor-not-allowed' : ''}`}
|
|
>
|
|
{/* Glow effect when active */}
|
|
{checked && (
|
|
<motion.div
|
|
className="absolute inset-0 rounded-full bg-primary-blue"
|
|
initial={{ boxShadow: '0 0 0px rgba(25, 140, 255, 0)' }}
|
|
animate={{ boxShadow: '0 0 12px rgba(25, 140, 255, 0.4)' }}
|
|
transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
|
|
/>
|
|
)}
|
|
|
|
{/* Knob */}
|
|
<motion.span
|
|
className="absolute top-0.5 w-5 h-5 bg-white rounded-full shadow-md"
|
|
initial={false}
|
|
animate={{
|
|
x: checked ? 24 : 2,
|
|
scale: 1,
|
|
}}
|
|
whileTap={{ scale: disabled ? 1 : 0.9 }}
|
|
transition={{
|
|
type: 'spring',
|
|
stiffness: 500,
|
|
damping: 30,
|
|
duration: shouldReduceMotion ? 0 : undefined,
|
|
}}
|
|
/>
|
|
</button>
|
|
</label>
|
|
);
|
|
} |