hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive page panel and add-doctor

Browse Source
This commit is contained in:
Ehsan
2024-10-15 00:49:07 +03:30
parent d6b08565a1
commit b561b111ec
21 changed files with 128 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/panel/userAccount/bank/cards/Item.js
+70
View File
@@ -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
+15
View File
@@ -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;