49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import { cn, segmentedClass } from "@/lib/ui/variants";
|
|
|
|
export interface SegmentOption<T extends string> {
|
|
value: T;
|
|
label: ReactNode;
|
|
}
|
|
|
|
interface SegmentedControlProps<T extends string> {
|
|
options: Array<SegmentOption<T>>;
|
|
value: T;
|
|
onChange: (value: T) => void;
|
|
ariaLabel: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function SegmentedControl<T extends string>({
|
|
options,
|
|
value,
|
|
onChange,
|
|
ariaLabel,
|
|
className,
|
|
}: SegmentedControlProps<T>) {
|
|
return (
|
|
<div className={segmentedClass(className)} role="group" aria-label={ariaLabel}>
|
|
{options.map((option) => {
|
|
const selected = option.value === value;
|
|
return (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
aria-pressed={selected}
|
|
onClick={() => onChange(option.value)}
|
|
className={cn(
|
|
"rounded px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cinnabar/35",
|
|
selected
|
|
? "bg-panel text-cinnabar shadow-paper"
|
|
: "text-ink-soft hover:text-cinnabar",
|
|
)}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|