33 lines
770 B
TypeScript
33 lines
770 B
TypeScript
type Option<T extends string> = { value: T; label: string };
|
|
|
|
type Props<T extends string> = {
|
|
value: T;
|
|
options: Option<T>[];
|
|
onChange: (value: T) => void;
|
|
ariaLabel?: string;
|
|
};
|
|
|
|
export function AppSegmented<T extends string>({
|
|
value,
|
|
options,
|
|
onChange,
|
|
ariaLabel,
|
|
}: Props<T>) {
|
|
return (
|
|
<div className="app-segmented" role="tablist" aria-label={ariaLabel}>
|
|
{options.map((option) => (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={option.value === value}
|
|
className={`app-segmented__item${option.value === value ? " is-on" : ""}`}
|
|
onClick={() => onChange(option.value)}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|