49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
import React, {Dispatch, SetStateAction} from "react";
|
|
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
|
|
interface SelectOption {
|
|
label: string,
|
|
value: string,
|
|
}
|
|
|
|
interface SelectOptionFieldProps {
|
|
label: string,
|
|
options: SelectOption[],
|
|
setOptionValue: Dispatch<SetStateAction<string>>,
|
|
isRequired?: boolean,
|
|
isDisabled?: boolean,
|
|
icon?: IconDefinition,
|
|
}
|
|
|
|
export default function SelectOptionField(
|
|
{
|
|
label,
|
|
options,
|
|
setOptionValue,
|
|
isRequired = false,
|
|
isDisabled = false,
|
|
icon
|
|
}: SelectOptionFieldProps
|
|
) {
|
|
return (
|
|
<div
|
|
className={'flex justify-start items-center gap-2 px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none w-full hover:bg-secondary hover:border-secondary focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 focus-within:bg-secondary transition-all duration-200'}>
|
|
{
|
|
icon && <FontAwesomeIcon icon={icon} className={'text-primary w-4 h-4'}/>
|
|
}
|
|
<select onChange={(e) => setOptionValue(e.target.value)}
|
|
className={'w-full bg-transparent text-text-primary border-none outline-none font-medium disabled:opacity-50 disabled:cursor-not-allowed'}
|
|
required={isRequired}
|
|
disabled={isDisabled}>
|
|
<option value={''} defaultChecked={true} hidden={true}
|
|
className="bg-tertiary">{label}{isRequired ? ' *' : ''}</option>
|
|
{options.map((option: SelectOption) => (
|
|
<option key={option.value} value={option.value}
|
|
className="bg-tertiary text-text-primary">{option.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)
|
|
}
|