modal add card in page bank-account

2024-10-10 03:21:31 +03:30
parent d404180b92
commit 81e07a5f43
12 changed files with 70 additions and 10 deletions
@@ -0,0 +1,49 @@
+import ContentText from "@/app/component/ContentText";
+import EditField from "@/app/component/EditField";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+
+const list = [
+  { label: "بانک 1", id: 10 },
+  { label: "بانک 2", id: 20 },
+  { label: "بانک 3", id: 30 },
+  { label: "بانک 4", id: 40 },
+];
+
+function Form({ data, changeData }) {
+  return (
+    <div className="mt-[40px] flex flex-col gap-[32px] px-[52px]">
+      <ContentText text="شماره کارت">
+        <EditField
+          isTransparent={true}
+          placeholder="شماره کارت خود را بنویسید..."
+          iconGray={true}
+          changeData={changeData}
+          data={data.card}
+          noDisable={true}
+          name="card"
+        />
+      </ContentText>
+      <ContentText text="شماره شبا">
+        <EditField
+          isTransparent={true}
+          placeholder="شماره شبا خود را بنویسید..."
+          iconGray={true}
+          changeData={changeData}
+          data={data.shaba}
+          noDisable={true}
+          name="card"
+        />
+      </ContentText>
+      <ContentText text="بانک">
+        <AutoCompleteSelect
+          updateData={changeData}
+          label="انتخاب بانک...."
+          name="bank"
+          list={list}
+        />
+      </ContentText>
+    </div>
+  );
+}
+
+export default Form;
@@ -0,0 +1,70 @@
+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";
+import Form from "./Form";
+
+function ModalAddCard() {
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState({
+    card: "",
+    shaba: "",
+    bank: "",
+  });
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const changeData = (value, name) => setData({ ...data, [name]: value });
+
+  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] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]"
+        >
+          <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>
+          <Form data={data} changeData={changeData} />
+          <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;