responsive page panel and add-doctor

components/panel/userAccount/bank/List.js

@@ -10,7 +10,7 @@ function List({ data, loading }) {
   const centerTable = [0, 4, 5];
 
   return (
-    <div className="!mt-[40px]">
+    <div className="!mt-[40px] hidden md:block">
       <div className="hidden md:block w-full">
         <CustomTable tableHead={tableHead} centerTable={centerTable}>
           {data.map((row, idx) => (
@@ -67,16 +67,14 @@ function List({ data, loading }) {
                 className="!text-center !bg-[#F8F8F8] !pr-[18px] !text-nowrap"
                 align="right"
               >
-                <TextLoading width={50} height={18} loading={loading}>
-                  <div className="flex items-center justify-center gap-[4px]">
-                    <Button className="!min-w-fit !p-1" variant="text">
-                      <TrashB />
-                    </Button>
-                    <Button className="!min-w-fit !p-1" variant="text">
-                      <EditB />
-                    </Button>
-                  </div>
-                </TextLoading>
+                <div className="flex items-center justify-center gap-[4px]">
+                  <Button className="!min-w-fit !p-1" variant="text">
+                    <TrashB />
+                  </Button>
+                  <Button className="!min-w-fit !p-1" variant="text">
+                    <EditB />
+                  </Button>
+                </div>
               </TableCell>
             </TableRow>
           ))}

components/panel/userAccount/bank/cards/Item.js

@@ -0,0 +1,70 @@
+import TextLoading from "@/app/component/loading/Text";
+import SwitchTable from "@/app/component/SwitchTable";
+import EditB from "@/components/icons/EditB";
+import TrashB from "@/components/icons/TrashB";
+import { Button } from "@mui/material";
+
+function Item({ data, loading }) {
+  return (
+    <li className="rounded-[8px] bg-[#FFF] p-[12px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
+      <div className="w-full flex items-center justify-between">
+        <div className="flex items-center justify-start gap-[4px]">
+          <TextLoading width={50} height={18} loading={loading}>
+            <div className="flex items-center justify-start gap-[16px]">
+              <p className="text-[16px] min-w-[60px] font-medium text-[#616161]">
+                {data.status ? "فعال" : "غیر فعال"}
+              </p>
+              <SwitchTable value={data.status} />
+            </div>
+          </TextLoading>
+        </div>
+        <div className="flex items-center justify-center gap-[4px]">
+          <Button className="!min-w-fit !p-1" variant="text">
+            <TrashB />
+          </Button>
+          <Button className="!min-w-fit !p-1" variant="text">
+            <EditB />
+          </Button>
+        </div>
+      </div>
+      <ul className="flex flex-col mt-[16px]">
+        <li className="flex items-center justify-between gap-[12px]">
+          <TextLoading loading={loading} width={60} height={18}>
+            <p className="text-[#7E7E7E] text-[14px] font-normal">
+              شماره کارت:
+            </p>
+          </TextLoading>
+          <TextLoading loading={loading} width={90} height={18}>
+            <p className="text-[#616161] text-[12px] font-medium">
+              {data.card_number}
+            </p>
+          </TextLoading>
+        </li>
+        <span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
+        <li className="flex items-center justify-between gap-[12px]">
+          <TextLoading loading={loading} width={60} height={18}>
+            <p className="text-[#7E7E7E] text-[14px] font-normal">شماره شبا:</p>
+          </TextLoading>
+          <TextLoading loading={loading} width={90} height={18}>
+            <p className="text-[#616161] text-[12px] font-medium">
+              {data.shaba_number}
+            </p>
+          </TextLoading>
+        </li>
+        <span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
+        <li className="flex items-center justify-between gap-[12px]">
+          <TextLoading loading={loading} width={60} height={18}>
+            <p className="text-[#7E7E7E] text-[14px] font-normal">بانک:</p>
+          </TextLoading>
+          <TextLoading loading={loading} width={90} height={18}>
+            <p className="text-[#616161] text-[12px] font-medium">
+              {data.bank}
+            </p>
+          </TextLoading>
+        </li>
+      </ul>
+    </li>
+  );
+}
+
+export default Item;

components/panel/userAccount/bank/cards/index.js

@@ -0,0 +1,15 @@
+import Item from "./Item";
+
+function Cards({ data, loading }) {
+  console.log(data);
+
+  return (
+    <ul className="md:hidden mt-[24px] grid grid-cols-1 sm:grid-cols-2 gap-[16px]">
+      {data.map((item, idx) => (
+        <Item data={item} key={idx} />
+      ))}
+    </ul>
+  );
+}
+
+export default Cards;

components/panel/userAccount/bank/head/index.js

@@ -1,4 +1,4 @@
-import ModalAddCard from "./modal/ModalAddCard";
+import ModalAddCard from "./modal";
 
 function Head() {
   return (

components/panel/userAccount/bank/head/modal/Form.js

@@ -11,7 +11,7 @@ const list = [
 
 function Form({ data, changeData }) {
   return (
-    <div className="mt-[40px] flex flex-col gap-[32px] px-[52px]">
+    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
       <ContentText text="شماره کارت">
         <EditField
           isTransparent={true}

components/panel/userAccount/bank/head/modal/index.js

@@ -19,10 +19,10 @@ function ModalAddCard() {
   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"
+        className="!bg-[#5559CE] !w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
         onClick={handleOpen}
         variant="contained"
       >
@@ -33,7 +33,7 @@ function ModalAddCard() {
       <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]"
+          className="!w-full !h-full md:!h-fit sm:!w-fit !rounded-none sm:!rounded-[8px] sm:!min-w-[524px] !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">
@@ -62,7 +62,7 @@ function ModalAddCard() {
           </div>
         </Box>
       </Modal>
-    </div>
+    </>
   );
 }
 

components/panel/userAccount/bank/index.js

@@ -1,3 +1,4 @@
+import Cards from "./cards";
 import Head from "./head";
 import List from "./List";
 
@@ -6,6 +7,7 @@ function Bank({ data }) {
     <div className="opacity-page">
       <Head />
       <List data={data} loading={false} />
+      <Cards data={data} loading={false} />
     </div>
   );
 }