55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import * as React from 'react';
|
|
import { type IInputGroup } from '../../Interfaces/IInputGroup';
|
|
|
|
interface ISelectProps {
|
|
labelKey?: string
|
|
labelText: string
|
|
inputKey: string
|
|
labelClassName: string
|
|
inputClassName: string
|
|
inputs: IInputGroup[]
|
|
value?: string
|
|
onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void
|
|
}
|
|
|
|
const className = `
|
|
w-full
|
|
text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
|
|
bg-white border-2 border-white rounded-lg placeholder-gray-800
|
|
focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
|
|
disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none`;
|
|
|
|
export function Select(props: ISelectProps): JSX.Element {
|
|
const options = [(
|
|
<option key='symbol-none' value=''>None</option>
|
|
)];
|
|
|
|
props.inputs.forEach(input => {
|
|
options.push(<option
|
|
key={input.value}
|
|
value={input.value}
|
|
>
|
|
{input.text}
|
|
</option>);
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<label
|
|
key={props.labelKey}
|
|
className={`text-xs font-medium text-gray-800 cursor-pointer ${props.labelClassName}`}
|
|
htmlFor={props.inputKey}
|
|
>
|
|
{props.labelText}
|
|
</label>
|
|
<select
|
|
id={props.inputKey}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
className={className}
|
|
>
|
|
{options}
|
|
</select>
|
|
</>
|
|
);
|
|
}
|