Spaces:
Running
Running
File size: 1,312 Bytes
d54a751 | 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 41 42 43 44 45 46 47 48 49 50 | 'use client';
/**
* Claymorphism segmented control — a discrete picker between 2–4 modes
* (e.g. rectangular/circular tree layout). Low-stakes, tactile.
*/
interface ClaySegmentedProps<T extends string> {
options: { value: T; label: string }[];
value: T;
onChange: (value: T) => void;
disabled?: boolean;
className?: string;
size?: 'sm' | 'md';
}
export function ClaySegmented<T extends string>({
options,
value,
onChange,
disabled,
className = '',
size = 'md',
}: ClaySegmentedProps<T>) {
return (
<div className={`clay inline-flex rounded-lg p-0.5 gap-0.5 ${disabled ? 'opacity-50' : ''} ${className}`}>
{options.map((opt) => {
const active = opt.value === value;
return (
<button
key={opt.value}
type="button"
onClick={() => onChange(opt.value)}
disabled={disabled}
className={`rounded-md capitalize font-medium transition-colors ${
size === 'sm' ? 'px-2.5 py-1 text-xs' : 'px-3 py-1.5 text-sm'
} ${
active
? 'bg-accent-cyan/20 text-accent-cyan'
: 'text-text-secondary hover:text-text-primary'
}`}
>
{opt.label}
</button>
);
})}
</div>
);
}
|