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

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,
};