Justin Edmund
fb31d6795c
* Uses new Selects * Adds PictureSelectItem for showing an image next to text * Adds translations * Add theme select
35 lines
899 B
TypeScript
35 lines
899 B
TypeScript
import React, { ComponentProps } from 'react'
|
|
import * as Select from '@radix-ui/react-select'
|
|
|
|
import './index.scss'
|
|
import classNames from 'classnames'
|
|
|
|
interface Props extends ComponentProps<'div'> {
|
|
src: string[]
|
|
element: string
|
|
value: string
|
|
}
|
|
|
|
const PictureSelectItem = React.forwardRef<HTMLDivElement, Props>(
|
|
function selectItem({ children, ...props }, forwardedRef) {
|
|
return (
|
|
<Select.Item
|
|
className={classNames('SelectItem Picture', props.className)}
|
|
{...props}
|
|
ref={forwardedRef}
|
|
value={`${props.value}`}
|
|
>
|
|
<div className={`preview ${props.element}`}>
|
|
<img
|
|
alt={`${props.value}`}
|
|
src={props.src[0]}
|
|
srcSet={props.src.join(', ')}
|
|
/>
|
|
</div>
|
|
<Select.ItemText>{children}</Select.ItemText>
|
|
</Select.Item>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default PictureSelectItem
|