51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import React, { ComponentProps } from 'react'
|
|
import classNames from 'classnames'
|
|
import * as Select from '@radix-ui/react-select'
|
|
|
|
import styles from './index.module.scss'
|
|
|
|
interface Props extends ComponentProps<'div'> {
|
|
value: string | number
|
|
element?: string
|
|
icon?: {
|
|
src: string[]
|
|
alt: string
|
|
}
|
|
}
|
|
|
|
const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
|
|
{ icon, value, children, ...props },
|
|
forwardedRef
|
|
) {
|
|
const itemClasses = classNames(
|
|
{
|
|
[styles.item]: true,
|
|
},
|
|
props.className?.split(' ').map((className) => styles[className])
|
|
)
|
|
|
|
const wrapperClasses = classNames(
|
|
{
|
|
[styles.preview]: true,
|
|
},
|
|
props.element && styles[props.element]
|
|
)
|
|
|
|
return (
|
|
<Select.Item
|
|
{...props}
|
|
className={itemClasses}
|
|
ref={forwardedRef}
|
|
value={`${value}`}
|
|
>
|
|
{icon && (
|
|
<div className={wrapperClasses}>
|
|
<img alt={icon.alt} src={icon.src[0]} srcSet={icon.src.join(', ')} />
|
|
</div>
|
|
)}
|
|
<Select.ItemText>{children}</Select.ItemText>
|
|
</Select.Item>
|
|
)
|
|
})
|
|
|
|
export default SelectItem
|