design table bank

components/panel/userAccount/bank/List.js

@@ -1,22 +1,11 @@
 import CustomTable from "@/app/component/CustomTable";
 import { Button, Switch, TableCell, TableRow } from "@mui/material";
-import Image from "next/image";
 import TextLoading from "@/app/component/loading/Text";
-import CustomLoading from "@/app/component/loading/Custom";
-import CircularLoading from "@/app/component/loading/Circular";
 import TrashB from "@/components/icons/TrashB";
 import EditB from "@/components/icons/EditB";
 
 function List({ data, loading }) {
-  const tableHead = [
+  const tableHead = ["ردیف", "شماره کارت", "شماره شبا", "بانک", "وضعیت", ""];
-    "ردیف",
-    "شناسه",
-    "نام پزشک",
-    "تاریخ",
-    "ساعت",
-    "مبلغ (تومان)",
-    "وضعیت",
-  ];
   const centerTable = [0, 4, 5];
 
   return (
@@ -28,13 +17,16 @@ function List({ data, loading }) {
               key={idx}
               className="!border-0 !border-b !border-[#DBDBDB]"
             >
-              <TableCell className="!pr-[18px] !text-nowrap" align="center">
+              <TableCell
+                className="!pr-[18px] !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !text-nowrap"
+                align="center"
+              >
                 <TextLoading width={15} height={18} loading={loading}>
                   {idx + 1}
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-start !pr-[18px] !text-nowrap"
+                className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
                 align="right"
               >
                 <TextLoading width={30} height={18} loading={loading}>
@@ -42,7 +34,7 @@ function List({ data, loading }) {
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-start !pr-[18px] !text-nowrap"
+                className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
                 align="right"
               >
                 <TextLoading width={30} height={18} loading={loading}>
@@ -50,7 +42,7 @@ function List({ data, loading }) {
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-start !pr-[18px] !text-nowrap"
+                className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
                 align="right"
               >
                 <TextLoading width={30} height={18} loading={loading}>
@@ -58,23 +50,20 @@ function List({ data, loading }) {
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-start !pr-[18px] !text-nowrap"
+                className="!text-start !bg-[#F8F8F8] !pr-[18px] !text-nowrap"
-                align="right"
-              >
-                <TextLoading width={30} height={18} loading={loading}>
-                  {row.status ? "فعال" : "غیر فعال"}
-                </TextLoading>
-              </TableCell>
-              <TableCell
-                className="!text-start !pr-[18px] !text-nowrap"
                 align="right"
               >
                 <TextLoading width={50} height={18} loading={loading}>
-                  <Switch />
+                  <div className="flex items-center justify-start gap-[16px]">
+                    <p className="text-[16px] min-w-[60px] font-medium text-[#616161]">
+                      {row.status ? "فعال" : "غیر فعال"}
+                    </p>
+                    <Switch dir="ltr" />
+                  </div>
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-center !pr-[18px] !text-nowrap"
+                className="!text-center !bg-[#F8F8F8] !pr-[18px] !text-nowrap"
                 align="right"
               >
                 <TextLoading width={50} height={18} loading={loading}>