27 lines
764 B
TypeScript
27 lines
764 B
TypeScript
type TabsProps<T extends string> = {
|
|
options: readonly T[];
|
|
active: T;
|
|
onChange: (value: T) => void;
|
|
};
|
|
|
|
export default function Tabs<T extends string>({ options, active, onChange }: TabsProps<T>) {
|
|
return (
|
|
<div className="inline-flex flex-wrap gap-2">
|
|
{options.map((option) => (
|
|
<button
|
|
key={option}
|
|
className={`rounded-xl border px-6 py-3 text-base font-semibold transition-colors ${
|
|
option === active
|
|
? "border-accent bg-accent text-white shadow-sm"
|
|
: "border-slate-300 bg-white text-slate-700 hover:border-slate-400"
|
|
}`}
|
|
onClick={() => onChange(option)}
|
|
type="button"
|
|
>
|
|
{option}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|