md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: streamline layout and error handling in CabinetCreation component

Browse Source
This commit is contained in:
Md Asif 2024-12-24 01:06:10 +05:30
parent 27f4597348
commit 03c4988ff1
1 changed files with 89 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
src/pages/CabinetCreation.jsx
View File

@ -36,103 +36,99 @@ function CabinetCreation() {
}); });
}; };
return ( return (
<motion.div className="w-full h-fit" initial={{ scale: 0.9 }} animate={{ scale: 1 }} exit={{ scale: 0 }}> <FormBox title={t("cabinetCreation")}>
<FormBox title={t("cabinetCreation")}> <div className="p-2 pt-7 flex flex-col gap-4">
<div className="p-2 pt-7 flex flex-col gap-4"> <div className="flex">
<div className="flex"> <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]"> {t("cabinetId")}
{t("cabinetId")} </label>
</label> <div className="w-full">
<div className="w-full"> <input
<input value={cabinetId.id}
value={cabinetId.id} className={clsx(
className={clsx( "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
"w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey", !cabinetId.valid && "border-error"
!cabinetId.valid && "border-error"
)}
onChange={(e) =>
setCabinetId({
id: e.target.value.toUpperCase(),
valid: true,
})
}
type="text"
maxLength={6}
/>
<AnimatePresence initial={false}>
{!cabinetId.valid && (
<motion.div
className="w-1/5 text-sm text-error ml-3 pt-1"
initial={{ opacity: 0,scale: 0 }}
animate={{ opacity: 1,scale: 1 }}
exit={{ opacity: 0,scale: 0 }}
key="cabinetIdError"
>
Invalid Cabinet Id
</motion.div>
)}
</AnimatePresence>
</div>
</div>
<div className="flex">
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
{t("cabinetKeyId")}
</label>
<div className="w-full">
<input
value={cabinetKeyId.id}
className={clsx(
"w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
!cabinetKeyId.valid && "border-error"
)}
onChange={(e) =>
setCabinetKeyId({
id: e.target.value.toUpperCase(),
valid: true,
})
}
type="text"
maxLength={6}
/>
{!cabinetKeyId.valid && (
<div className="text-sm text-error ml-3 pt-1">
Invalid Key Id
</div>
)} )}
</div> onChange={(e) =>
</div> setCabinetId({
<div className="flex"> id: e.target.value.toUpperCase(),
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]"> valid: true,
{t("noOfLockers")} })
</label> }
<div className="w-full"> type="text"
<input maxLength={6}
value={noOfLockers.number} />
className={clsx( <AnimatePresence initial={false}>
"w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey", {!cabinetId.valid && (
!noOfLockers.valid && "border-error" <motion.div
)} className="w-1/5 text-sm text-error ml-3 pt-1"
onChange={(e) => initial={{ opacity: 0, scale: 0 }}
setNoOfLockers({ number: e.target.value, valid: true }) animate={{ opacity: 1, scale: 1 }}
} exit={{ opacity: 0, scale: 0 }}
type="number" key="cabinetIdError"
/> >
{!noOfLockers.valid && ( Invalid Cabinet Id
<div className="text-sm text-error ml-3 pt-1"> </motion.div>
Invalid Number of Lockers
</div>
)} )}
</div> </AnimatePresence>
</div> </div>
</div> </div>
<Button <div className="flex">
text={t("next")} <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
onClick={(e) => { {t("cabinetKeyId")}
handleNext(e); </label>
}} <div className="w-full">
/> <input
</FormBox> value={cabinetKeyId.id}
</motion.div> className={clsx(
"w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
!cabinetKeyId.valid && "border-error"
)}
onChange={(e) =>
setCabinetKeyId({
id: e.target.value.toUpperCase(),
valid: true,
})
}
type="text"
maxLength={6}
/>
{!cabinetKeyId.valid && (
<div className="text-sm text-error ml-3 pt-1">Invalid Key Id</div>
)}
</div>
</div>
<div className="flex">
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
{t("noOfLockers")}
</label>
<div className="w-full">
<input
value={noOfLockers.number}
className={clsx(
"w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
!noOfLockers.valid && "border-error"
)}
onChange={(e) =>
setNoOfLockers({ number: e.target.value, valid: true })
}
type="number"
/>
{!noOfLockers.valid && (
<div className="text-sm text-error ml-3 pt-1">
Invalid Number of Lockers
</div>
)}
</div>
</div>
</div>
<Button
text={t("next")}
onClick={(e) => {
handleNext(e);
}}
/>
</FormBox>
); );
} }