43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { type ComponentPropsWithoutRef } from 'react';
|
|
import { Select as RSelect } from 'radix-ui';
|
|
import { Check, CaretDown } from '@phosphor-icons/react';
|
|
|
|
type SelectProps = ComponentPropsWithoutRef<typeof RSelect.Root> & {
|
|
placeholder?: string;
|
|
items: Array<{ value: string; label: string }>;
|
|
'aria-label'?: string;
|
|
};
|
|
|
|
export const Select = ({ placeholder, items, ...rest }: SelectProps) => (
|
|
<RSelect.Root {...rest}>
|
|
<RSelect.Trigger className="modern-sk-select" aria-label={rest['aria-label']}>
|
|
<RSelect.Value placeholder={placeholder} />
|
|
<RSelect.Icon className="modern-sk-select__icon">
|
|
<CaretDown size={12} weight="bold" />
|
|
</RSelect.Icon>
|
|
</RSelect.Trigger>
|
|
<RSelect.Portal>
|
|
<RSelect.Content
|
|
className="modern-sk-select__content"
|
|
position="popper"
|
|
sideOffset={6}
|
|
>
|
|
<RSelect.Viewport>
|
|
{items.map((it) => (
|
|
<RSelect.Item
|
|
key={it.value}
|
|
value={it.value}
|
|
className="modern-sk-select__item"
|
|
>
|
|
<RSelect.ItemText>{it.label}</RSelect.ItemText>
|
|
<RSelect.ItemIndicator className="modern-sk-select__item-indicator">
|
|
<Check size={14} weight="bold" />
|
|
</RSelect.ItemIndicator>
|
|
</RSelect.Item>
|
|
))}
|
|
</RSelect.Viewport>
|
|
</RSelect.Content>
|
|
</RSelect.Portal>
|
|
</RSelect.Root>
|
|
);
|