hamid zarghami
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { FC, SelectHTMLAttributes } from 'react'
|
|
import { clx } from '../helpers/utils'
|
|
import { ArrowDown2 } from 'iconsax-react'
|
|
|
|
export type ItemsSelectType = {
|
|
value: string,
|
|
label: string,
|
|
}
|
|
type Props = {
|
|
className?: string,
|
|
items: ItemsSelectType[],
|
|
error_text?: string,
|
|
placeholder?: string,
|
|
label?: string,
|
|
readOnly?: boolean,
|
|
} & SelectHTMLAttributes<HTMLSelectElement>
|
|
|
|
const Select: FC<Props> = (props: Props) => {
|
|
return (
|
|
<div className='w-full'>
|
|
{
|
|
props.label &&
|
|
<label className='text-sm'>
|
|
{props.label}
|
|
</label>
|
|
}
|
|
<div className='relative'>
|
|
<select {...props} className={clx(
|
|
'w-full text-black relative block border appearance-none border-border px-2.5 h-10 text-sm rounded-2.5 bg-white',
|
|
props.readOnly && 'bg-gray-100 border-0 text-description',
|
|
props.className,
|
|
props.label && 'mt-1'
|
|
)}>
|
|
{
|
|
props.placeholder &&
|
|
<option value="" disabled selected>{props.placeholder}</option>
|
|
}
|
|
{
|
|
props.items?.map((item) => {
|
|
return (
|
|
<option key={item.value} value={item.value}>
|
|
{item.label}
|
|
</option>
|
|
)
|
|
})
|
|
}
|
|
|
|
</select>
|
|
<ArrowDown2 size={16} color='black' className={clx(
|
|
'absolute z-0 top-3 left-2 pointer-events-none',
|
|
)} />
|
|
</div>
|
|
{
|
|
props.error_text && props.error_text !== '' ?
|
|
<div className='text-xs text-right text-red-600 mt-2 mr-2 font-medium'>
|
|
{props.error_text}
|
|
</div>
|
|
: null
|
|
}
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
export default Select |