71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import FormBox from "../components/FormBox";
|
|
import Button from "../components/Button";
|
|
import { motion } from "motion/react";
|
|
import clsx from "clsx";
|
|
import { AnimatePresence } from "motion/react";
|
|
|
|
function CabinetMaintenace() {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation();
|
|
const [operation, setOperation] = useState({ value: "", valid: true });
|
|
|
|
const handleNext = (e) => {
|
|
e.preventDefault();
|
|
if (operation.value === "") {
|
|
setOperation({ value: operation.value, valid: false });
|
|
}
|
|
navigate(operation.value);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<FormBox title={t("cabinetMaintenance")}>
|
|
<div className="p-2 pt-7">
|
|
<div className="flex">
|
|
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
|
|
{t("operation")}
|
|
</label>
|
|
<div className="w-full">
|
|
<select
|
|
className={clsx(
|
|
"w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey",
|
|
!operation.valid && "border-error"
|
|
)}
|
|
onChange={(e) =>
|
|
setOperation({ value: e.target.value, valid: true })
|
|
}
|
|
defaultValue={operation.value}
|
|
value={operation.value}
|
|
>
|
|
<option value="" disabled>
|
|
{t("select")}
|
|
</option>
|
|
<option value="create">{t("create")}</option>
|
|
</select>
|
|
<AnimatePresence>
|
|
{!operation.valid && (
|
|
<motion.div
|
|
className="w-1/5 text-sm text-error ml-3 pt-1"
|
|
initial={{ y: 15, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: 15, opacity: 0 }}
|
|
key="cabinetIdError"
|
|
>
|
|
Invalid Operation
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button text={t("next")} onClick={(e) => handleNext(e)} />
|
|
</FormBox>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CabinetMaintenace;
|