72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
|
|
|
|
import { Box } from './Box';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface SegmentedControlOption {
|
|
value: string;
|
|
label: string;
|
|
description?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
interface SegmentedControlProps {
|
|
options: SegmentedControlOption[];
|
|
value: string;
|
|
onChange?: (value: string) => void;
|
|
}
|
|
|
|
export function SegmentedControl({
|
|
options,
|
|
value,
|
|
onChange,
|
|
}: SegmentedControlProps) {
|
|
const handleSelect = (optionValue: string, optionDisabled?: boolean) => {
|
|
if (!onChange || optionDisabled) return;
|
|
if (optionValue === value) return;
|
|
onChange(optionValue);
|
|
};
|
|
|
|
return (
|
|
<Box style={{ display: 'inline-flex', width: '100%', flexWrap: 'wrap', gap: '0.5rem', borderRadius: '9999px', backgroundColor: 'rgba(38, 38, 38, 0.6)', padding: '0.25rem' }}>
|
|
{options.map((option) => {
|
|
const isSelected = option.value === value;
|
|
|
|
return (
|
|
<Box
|
|
key={option.value}
|
|
as="button"
|
|
type="button"
|
|
onClick={() => handleSelect(option.value, option.disabled)}
|
|
aria-pressed={isSelected}
|
|
disabled={option.disabled}
|
|
style={{
|
|
flex: 1,
|
|
minWidth: '140px',
|
|
padding: '0.375rem 0.75rem',
|
|
borderRadius: '9999px',
|
|
transition: 'all 0.2s',
|
|
textAlign: 'left',
|
|
backgroundColor: isSelected ? '#3b82f6' : 'transparent',
|
|
color: isSelected ? 'white' : '#d1d5db',
|
|
opacity: option.disabled ? 0.5 : 1,
|
|
cursor: option.disabled ? 'not-allowed' : 'pointer',
|
|
border: 'none'
|
|
}}
|
|
>
|
|
<Stack gap={0.5}>
|
|
<Text size="xs" weight="medium" color="inherit">{option.label}</Text>
|
|
{option.description && (
|
|
<Text size="xs" color={isSelected ? 'text-white' : 'text-gray-400'} style={{ fontSize: '10px', opacity: isSelected ? 0.8 : 1 }}>
|
|
{option.description}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
}
|