asi-calculator/components/Select/Select.tsx

23 lines
672 B
TypeScript
Raw Normal View History

2024-04-01 14:42:08 +02:00
import { SelectHTMLAttributes } from 'react'
import styles from './Select.module.css'
import { CaretDownIcon } from '@radix-ui/react-icons'
type Props = SelectHTMLAttributes<HTMLSelectElement> & {
options: { value: string; label: string }[]
}
export function Select({ options, ...rest }: Props) {
return (
<span className={styles.selectWrapper}>
<select className={styles.select} {...rest}>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
{options.length > 1 ? <CaretDownIcon className={styles.icon} /> : null}
</span>
)
}