feat : fixed menu

This commit is contained in:
alij
2024-06-22 16:15:51 +04:30
parent 1e19713994
commit 3d0eb5a66d
7 changed files with 52 additions and 17 deletions

View File

@@ -12,6 +12,7 @@ export default function MuiModal({
nameService,
submitText,
submitOnClick,
disabled,
children,
}: MuiModalProps) {
const [open, setOpen] = useState(false);
@@ -33,19 +34,19 @@ export default function MuiModal({
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
className="relative w-full h-full flex justify-center items-center border-none outline-none"
className="relative w-full h-full flex justify-center items-center !border-none !outline-none !ring-0"
>
<motion.div
className="max-md:w-72 md:w-80 lg:w-96 min-h-80 shadow-xl shadow-[rgb(20,20,20)] bg-[rgb(20,20,20,0.99)] rounded-lg p-4 relative flex flex-col justify-between items-center gap-4"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{duration:0.7}}
initial={{ y: "-100vw", opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5 }}
>
<motion.div className="w-full h-full flex gap-2 justify-between">
<h1 className="text-lg md:text-xl font-bold">
{title && title}
{nameService && (
<span className="text-green-600"> {nameService} </span>
<span className="text-secondTheme"> {nameService} </span>
)}
</h1>
<button onClick={handleClose}>
@@ -55,10 +56,14 @@ export default function MuiModal({
<motion.div className="w-full h-full flex flex-col justify-between text-center items-center">
{children}
</motion.div>
<motion.div className={`w-full h-full flex ${submitText ? 'justify-end' : 'justify-center' } items-center gap-2 md:gap-3 text-lg md:text-xl`}>
<motion.div
className={`w-full h-full flex ${
submitText ? "justify-end" : "justify-center"
} items-center gap-2 md:gap-3 text-lg md:text-xl`}
>
<Button onClick={() => handleClose()}> بستن </Button>
{submitText && (
<Button onClick={submitOnClick}> {submitText} </Button>
<Button onClick={submitOnClick} disabled={disabled}> {submitText} </Button>
)}
</motion.div>
</motion.div>