| 14 | } |
| 15 | |
| 16 | function OptionRow({ id, label, description, checked, onCheckedChange, disabled }: OptionRowProps) { |
| 17 | return ( |
| 18 | <div className={cn("flex items-center justify-between gap-4 py-2", disabled && "opacity-40")}> |
| 19 | <label htmlFor={id} className={cn("flex flex-col gap-0.5", !disabled && "cursor-pointer")}> |
| 20 | <span className="text-sm text-surface-200">{label}</span> |
| 21 | {description && ( |
| 22 | <span className="text-xs text-surface-500">{description}</span> |
| 23 | )} |
| 24 | </label> |
| 25 | <Switch.Root |
| 26 | id={id} |
| 27 | checked={checked} |
| 28 | onCheckedChange={onCheckedChange} |
| 29 | disabled={disabled} |
| 30 | className={cn( |
| 31 | "w-9 h-5 rounded-full transition-colors outline-none cursor-pointer", |
| 32 | "data-[state=checked]:bg-brand-600 data-[state=unchecked]:bg-surface-700", |
| 33 | "disabled:cursor-not-allowed" |
| 34 | )} |
| 35 | > |
| 36 | <Switch.Thumb className="block w-4 h-4 bg-white rounded-full shadow transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5" /> |
| 37 | </Switch.Root> |
| 38 | </div> |
| 39 | ); |
| 40 | } |
| 41 | |
| 42 | interface ExportOptionsProps { |
| 43 | options: ExportOptions; |