import React from 'react'; type Props = { checked: boolean; label: string; onChange: (checked: boolean) => void; } export default function Checkbox({label, checked, onChange}: Props) { return ( <label className="flex items-center"> <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} className="sr-only peer"/> <span className="mr-2 flex items-center w-6 h-4 ~bg-gray-100 peer-checked:bg-emerald-300 rounded-full shadow-inner transition-colors" /> <span className="absolute left-0.5 top-0.5 w-3 h-3 ~bg-dropdown rounded-full shadow-md transform peer-checked:translate-x-2 transition-transform" /> <span className="uppercase tracking-wider text-xs font-medium">{label}</span> </label> ) }