hamid zarghami
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { type FC, type SelectHTMLAttributes } from 'react'
|
|
import { clx } from '../helpers/utils'
|
|
import { ArrowDown2 } from 'iconsax-react'
|
|
import Error from './Error'
|
|
|
|
export type ItemsSelectType = {
|
|
value: string,
|
|
label: string,
|
|
}
|
|
type Props = {
|
|
className?: string,
|
|
items: ItemsSelectType[],
|
|
error_text?: string,
|
|
placeholder?: string,
|
|
label?: string,
|
|
value?: string | number,
|
|
} & SelectHTMLAttributes<HTMLSelectElement>
|
|
|
|
const Select: FC<Props> = (props: Props) => {
|
|
return (
|
|
<div className='w-full relative'>
|
|
{
|
|
props.label &&
|
|
<label className='text-sm'>
|
|
{props.label}
|
|
</label>
|
|
}
|
|
<select {...props} className={clx(
|
|
'w-full text-black block border appearance-none border-border px-[10px] h-10 text-sm rounded-[10px] bg-white',
|
|
props.className,
|
|
props.label && 'mt-1'
|
|
)}>
|
|
{
|
|
props.placeholder &&
|
|
<option value="" disabled>{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',
|
|
props.label && 'top-10'
|
|
)} />
|
|
{
|
|
props.error_text && props.error_text !== '' ?
|
|
<Error
|
|
errorText={props.error_text}
|
|
/>
|
|
: null
|
|
}
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
export default Select |