51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Surface } from './Surface';
|
|
|
|
export interface SegmentedControlOption {
|
|
id: string;
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export interface SegmentedControlProps {
|
|
options: SegmentedControlOption[];
|
|
activeId: string;
|
|
onChange: (id: string) => void;
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export const SegmentedControl = ({
|
|
options,
|
|
activeId,
|
|
onChange,
|
|
fullWidth = false
|
|
}: SegmentedControlProps) => {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
padding={1}
|
|
display="inline-flex"
|
|
width={fullWidth ? '100%' : undefined}
|
|
>
|
|
{options.map((option) => {
|
|
const isSelected = option.id === activeId;
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
onClick={() => onChange(option.id)}
|
|
className={`flex-1 flex items-center justify-center gap-2 px-4 py-1.5 text-xs font-bold uppercase tracking-widest transition-all rounded-md ${
|
|
isSelected
|
|
? 'bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-intent-primary)] shadow-sm'
|
|
: 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]'
|
|
}`}
|
|
>
|
|
{option.icon}
|
|
{option.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</Surface>
|
|
);
|
|
};
|