47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
import PropTypes from "prop-types";
|
|
import { AnimatePresence } from "motion/react";
|
|
import clsx from "clsx";
|
|
import FieldError from "./FieldError";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
function FormSelect({ props, valid = true, className = "", options }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div>
|
|
<select
|
|
{...props}
|
|
className={clsx(
|
|
`w-72 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey ${className}`,
|
|
!valid && "border-error"
|
|
)}
|
|
>
|
|
<option disabled value="">
|
|
{t("select")}
|
|
</option>
|
|
{options?.map(({ value, label }) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<AnimatePresence>
|
|
{!valid && <FieldError text={"Invalid value"} />}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
FormSelect.propTypes = {
|
|
props: PropTypes.object,
|
|
className: PropTypes.string,
|
|
valid: PropTypes.bool,
|
|
options: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
value: PropTypes.string.isRequired,
|
|
label: PropTypes.string.isRequired,
|
|
})
|
|
).isRequired,
|
|
};
|
|
|
|
export default FormSelect;
|