Macbook
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
interface SegmentedControlProps<T extends string> {
|
|
options: { value: T; label: string }[];
|
|
value: T;
|
|
onChange: (v: T) => void;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
export default function SegmentedControl<T extends string>({
|
|
options,
|
|
value,
|
|
onChange,
|
|
size = 'md',
|
|
}: SegmentedControlProps<T>) {
|
|
return (
|
|
<div className={`seg seg-${size}`} role="tablist">
|
|
{options.map(opt => (
|
|
<button
|
|
key={opt.value}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={value === opt.value}
|
|
className={`seg-item${value === opt.value ? ' active' : ''}`}
|
|
onClick={() => onChange(opt.value)}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
<style>{`
|
|
.seg {
|
|
display: flex;
|
|
background: rgba(255,255,255,0.06);
|
|
border-radius: 10px;
|
|
padding: 3px;
|
|
gap: 2px;
|
|
}
|
|
.seg-sm .seg-item { font-size: 11px; padding: 6px 8px; }
|
|
.seg-md .seg-item { font-size: 12px; padding: 8px 10px; }
|
|
.seg-item {
|
|
flex: 1;
|
|
border-radius: 8px;
|
|
color: var(--gc-text-muted);
|
|
font-weight: 500;
|
|
min-height: 32px;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.seg-item.active {
|
|
background: var(--gc-accent-soft);
|
|
color: var(--gc-accent);
|
|
font-weight: 600;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|