Import source: src/components/ui/SegmentedControl
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,22 @@
|
|||||||
|
interface Option<T extends string> { label: string; value: T; }
|
||||||
|
interface Props<T extends string> { options: Option<T>[]; value: T; onChange: (v: T) => void; }
|
||||||
|
|
||||||
|
export function SegmentedControl<T extends string>({ options, value, onChange }: Props<T>) {
|
||||||
|
return (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{options.map(opt => (
|
||||||
|
<button
|
||||||
|
key={opt.value}
|
||||||
|
onClick={() => onChange(opt.value)}
|
||||||
|
className="px-4 py-2 rounded-[10px] text-sm font-medium transition-all duration-150 cursor-pointer"
|
||||||
|
style={value === opt.value
|
||||||
|
? { background: '#7C6FE0', color: 'white', boxShadow: '0 2px 12px rgba(124,111,224,0.3)' }
|
||||||
|
: { background: 'var(--bg-elevated)', color: 'var(--text-secondary)', border: '1px solid var(--border-sub)' }
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{opt.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user