44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import React, {ChangeEvent} from "react";
|
|
import {SelectBoxProps} from "@/shared/interface";
|
|
|
|
export interface SelectBoxFormProps {
|
|
onChangeCallBack: (event: ChangeEvent<HTMLSelectElement>) => void,
|
|
data: SelectBoxProps[],
|
|
defaultValue: string | null | undefined,
|
|
placeholder?: string,
|
|
disabled?: boolean
|
|
}
|
|
|
|
export default function SelectBox(
|
|
{
|
|
onChangeCallBack,
|
|
data,
|
|
defaultValue,
|
|
placeholder,
|
|
disabled
|
|
}: SelectBoxFormProps) {
|
|
return (
|
|
<select
|
|
onChange={onChangeCallBack}
|
|
disabled={disabled}
|
|
key={defaultValue || 'placeholder'}
|
|
defaultValue={defaultValue || '0'}
|
|
className={`w-full text-text-primary bg-secondary/50 hover:bg-secondary px-4 py-2.5 rounded-xl
|
|
border border-secondary/50
|
|
focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
|
|
hover:border-secondary
|
|
outline-none transition-all duration-200 cursor-pointer
|
|
${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
|
|
>
|
|
{placeholder && <option value={'0'}>{placeholder}</option>}
|
|
{
|
|
data.map((item: SelectBoxProps) => (
|
|
<option key={item.value} value={item.value} className="bg-tertiary text-text-primary">
|
|
{item.label}
|
|
</option>
|
|
))
|
|
}
|
|
</select>
|
|
)
|
|
}
|