deisgn page account bank header

2024-10-09 20:20:03 +03:30
parent c1898eb654
commit 2a98790ffd
10 changed files with 150 additions and 7 deletions
@@ -0,0 +1,60 @@
+import { useState } from "react";
+import TrashOrangeD from "@/components/icons/TrashOrangeD";
+import { Box, Button, Modal } from "@mui/material";
+import { styleDefault } from "@/mui";
+import CloseModalD from "@/components/icons/CloseModalD";
+import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
+
+function ModalAddCard() {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      {/* Button Modal */}
+      <Button
+        className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
+        onClick={handleOpen}
+        variant="contained"
+      >
+        اضافه کردن کارت
+        <ArrowLeftPA />
+      </Button>
+      {/* Content Modal */}
+      <Modal open={open} onClose={handleClose}>
+        <Box
+          sx={styleDefault}
+          className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
+        >
+          <div className="flex items-center justify-between w-full">
+            <p className="text-[#3B3B3B] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
+              اضافه کردن شماره کارت
+            </p>
+            <Button onClick={handleClose} className="!p-1" variant="text">
+              <CloseModalD />
+            </Button>
+          </div>
+          <div className="flex items-center justify-center gap-[12px] md:gap-[14px] lg:gap-[16px] mt-[32px] md:mt-[36px] lg:mt-[40px]">
+            <Button
+              variant="outlined"
+              onClick={handleClose}
+              className="!min-w-[134px] !rounded-[4px] !h-[40px] md:!h-[44px] lg:!h-[48px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium"
+            >
+              انصراف
+            </Button>
+            <Button
+              variant="contained"
+              onClick={handleClose}
+              className="!min-w-[134px] !rounded-[4px] !h-[40px] md:!h-[44px] lg:!h-[48px] !text-[#EFEFEF] !text-[16px] !font-medium"
+            >
+              ذخیره
+            </Button>
+          </div>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
+export default ModalAddCard;