You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.6 KiB
60 lines
1.6 KiB
import React from "react"; |
|
|
|
function Select({ |
|
options, |
|
fill, |
|
hoverFill, |
|
margin, |
|
borderColor, |
|
backgroundColor, |
|
onChange, |
|
name, |
|
defaultValue, |
|
width = "w-1/2", |
|
selectProvince, |
|
}) { |
|
return ( |
|
<div |
|
className={`inline-block ${width} relative group rounded-md overflow-hidden ${margin} bg-transparent`} |
|
> |
|
<select |
|
className={`text-gray70 text-base lg:text-tiny block appearance-none ${backgroundColor} w-full border border-solid px-4 py-3 pr-3 rounded-md leading-tight focus:outline-none focus:border-blueC0 focus:text-blueC0 ${borderColor}`} |
|
onChange={(e) => onChange(name, e.target.value)} |
|
defaultValue={defaultValue} |
|
> |
|
{selectProvince && ( |
|
<option value="" disabled selected hidden> |
|
{selectProvince} |
|
</option> |
|
)} |
|
{options.map((option, index) => ( |
|
<option |
|
key={index} |
|
value={option.value || option} |
|
className="text-sm lg:text-tiny" |
|
> |
|
{option.name || option} |
|
</option> |
|
))} |
|
</select> |
|
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2"> |
|
<svg |
|
className={`${fill} h-5 w-5 group-focus:${hoverFill}`} |
|
xmlns="http://www.w3.org/2000/svg" |
|
viewBox="0 0 20 20" |
|
> |
|
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /> |
|
</svg> |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
export default Select; |
|
|
|
Select.defaultProps = { |
|
options: ["Really", "Option 2", "Option 3"], |
|
borderColor: "border-gray-300", |
|
|
|
selectProvince: false, |
|
};
|
|
|