Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 11x 3x | import { SelectorButton } from '@/shared/ui/buttons';
interface ValueSelectorProps {
values: number[];
selectedValue: number;
selectedColor: string;
onChange: (value: number) => void;
dataPrefix?: string;
}
export const ValueSelector = ({
values,
selectedValue,
selectedColor,
onChange,
dataPrefix = 'tool',
}: ValueSelectorProps) => {
return (
<div className="flex items-center gap-2 overflow-x-auto py-2 min-h-[64px] pl-3 pr-2 scroll-px-2">
{values.map((value) => (
<SelectorButton
key={value}
testId={`${dataPrefix}-value-${value}`}
selected={value === selectedValue}
onClick={() => onChange(value)}
>
<span
className="block rounded-full"
style={{
width: value * 2 + 4,
height: value * 2 + 4,
background: selectedColor,
}}
/>
</SelectorButton>
))}
</div>
);
};
|