41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
label: string;
|
|
options: { value: string; label: string }[];
|
|
helperText?: string;
|
|
}
|
|
|
|
export const Select: React.FC<SelectProps> = ({ label, options, helperText, className = '', ...props }) => {
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="flex justify-between items-baseline">
|
|
<label className="block text-sm font-semibold text-gray-700">
|
|
{label}
|
|
</label>
|
|
{helperText && (
|
|
<span className="text-xs text-gray-500 italic">{helperText}</span>
|
|
)}
|
|
</div>
|
|
<div className="relative">
|
|
<select
|
|
className={`block w-full appearance-none rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2.5 pr-8 border bg-white text-gray-800 ${className}`}
|
|
{...props}
|
|
>
|
|
{options.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|