| 50 | } |
| 51 | |
| 52 | export function FormatSelector({ value, onChange }: FormatSelectorProps) { |
| 53 | return ( |
| 54 | <div className="grid grid-cols-5 gap-2"> |
| 55 | {FORMATS.map((fmt) => ( |
| 56 | <button |
| 57 | key={fmt.value} |
| 58 | onClick={() => onChange(fmt.value)} |
| 59 | className={cn( |
| 60 | "flex flex-col items-center gap-1.5 px-2 py-3 rounded-lg border text-center transition-colors", |
| 61 | value === fmt.value |
| 62 | ? "border-brand-500 bg-brand-500/10 text-brand-300" |
| 63 | : "border-surface-700 bg-surface-800 text-surface-400 hover:border-surface-600 hover:text-surface-200" |
| 64 | )} |
| 65 | title={fmt.description} |
| 66 | > |
| 67 | {fmt.icon} |
| 68 | <span className="text-xs font-medium leading-none">{fmt.label}</span> |
| 69 | </button> |
| 70 | ))} |
| 71 | </div> |
| 72 | ); |
| 73 | } |