90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { SelectHTMLAttributes, forwardRef } from "react";
|
|
|
|
interface SelectOption {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
label?: string;
|
|
error?: string;
|
|
helperText?: string;
|
|
leftIcon?: string;
|
|
options: SelectOption[];
|
|
placeholder?: string;
|
|
}
|
|
|
|
const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
|
(
|
|
{
|
|
label,
|
|
error,
|
|
helperText,
|
|
leftIcon,
|
|
options,
|
|
placeholder,
|
|
className = "",
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
return (
|
|
<div className="w-full">
|
|
{label && (
|
|
<label className="block text-[13px] font-semibold text-[#000000] mb-2">
|
|
{label}
|
|
{props.required && <span className="text-[#FF3A05] ml-1">*</span>}
|
|
</label>
|
|
)}
|
|
<div className="relative">
|
|
{leftIcon && (
|
|
<i
|
|
className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none z-10`}
|
|
/>
|
|
)}
|
|
<select
|
|
ref={ref}
|
|
className={`
|
|
w-full px-3.5 py-3 text-[14px] font-normal
|
|
border rounded-md bg-white
|
|
text-[#000000]
|
|
transition-all appearance-none
|
|
cursor-pointer
|
|
${leftIcon ? "pl-11" : ""}
|
|
pr-11
|
|
${error
|
|
? "border-[#FF3A05]"
|
|
: "border-[#E5E5E5] focus:border-[#FF3A05]"
|
|
}
|
|
outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
|
|
disabled:bg-[#F5F5F5] disabled:cursor-not-allowed
|
|
${className}
|
|
`}
|
|
{...props}
|
|
>
|
|
<option value="" disabled>
|
|
{placeholder || "Selecione uma opção"}
|
|
</option>
|
|
{options.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<i className="ri-arrow-down-s-line absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none" />
|
|
</div>
|
|
{helperText && !error && (
|
|
<p className="mt-1.5 text-[12px] text-[#7D7D7D]">{helperText}</p>
|
|
)}
|
|
{error && <p className="mt-1.5 text-[12px] text-[#FF3A05]">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Select.displayName = "Select";
|
|
|
|
export default Select;
|