32 lines
1.6 KiB
TypeScript
32 lines
1.6 KiB
TypeScript
import { Select } from 'radix-ui';
|
|
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
|
|
|
|
interface HistorySelectProps {
|
|
label: string;
|
|
value: string;
|
|
options: { value: string; label: string; detail?: string }[];
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
export function HistorySelect({ label, value, options, onChange }: HistorySelectProps) {
|
|
return <Select.Root value={value} onValueChange={onChange}>
|
|
<Select.Trigger className="asset-history-select" aria-label={label}>
|
|
<Select.Value />
|
|
<Select.Icon className="asset-history-select-icon"><ChevronDown size={14} /></Select.Icon>
|
|
</Select.Trigger>
|
|
<Select.Portal>
|
|
<Select.Content className="asset-history-select-menu" position="popper" align="start" sideOffset={6} collisionPadding={10}>
|
|
<Select.ScrollUpButton className="asset-history-select-scroll"><ChevronUp size={14} /></Select.ScrollUpButton>
|
|
<Select.Viewport className="asset-history-select-options">
|
|
{options.map(option => <Select.Item className="asset-history-select-option" key={option.value} value={option.value} textValue={option.label}>
|
|
<Select.ItemText>{option.label}</Select.ItemText>
|
|
{option.detail && <span className="asset-history-option-detail">{option.detail}</span>}
|
|
<Select.ItemIndicator className="asset-history-option-check"><Check size={14} /></Select.ItemIndicator>
|
|
</Select.Item>)}
|
|
</Select.Viewport>
|
|
<Select.ScrollDownButton className="asset-history-select-scroll"><ChevronDown size={14} /></Select.ScrollDownButton>
|
|
</Select.Content>
|
|
</Select.Portal>
|
|
</Select.Root>;
|
|
}
|