83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import { Box } from './primitives/Box';
|
|
import { Stack } from './primitives/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 (
|
|
<Stack
|
|
direction="row"
|
|
display="inline-flex"
|
|
w="full"
|
|
flexWrap="wrap"
|
|
gap={2}
|
|
rounded="full"
|
|
bg="bg-black/60"
|
|
p={1}
|
|
>
|
|
{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}
|
|
flex={1}
|
|
minWidth="140px"
|
|
px={3}
|
|
py={1.5}
|
|
rounded="full"
|
|
transition="all 0.2s"
|
|
textAlign="left"
|
|
bg={isSelected ? 'bg-primary-blue' : 'transparent'}
|
|
color={isSelected ? 'text-white' : 'text-gray-400'}
|
|
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'}
|
|
fontSize="10px"
|
|
opacity={isSelected ? 0.8 : 1}
|
|
>
|
|
{option.description}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Stack>
|
|
);
|
|
}
|