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/addDoctor/Step.js
+4 -3
View File
@@ -15,7 +15,8 @@ function Step({ value }) {
<li className="flex items-center justify-center" key={idx}>
<div className="flex flex-col items-center justify-center gap-2">
<div
className={`flex items-center bg-[#F6F6F6] justify-center p-[18px] w-[75px] h-[75px] rounded-full
className={`flex items-center bg-[#F6F6F6] justify-center p-[18px]
w-[32px] h-[32px] sm:w-[46px] sm:h-[46px] md:w-[60px] md:h-[60px] lg:w-[75px] lg:h-[75px] rounded-full
relative overflow-hidden before:delay-500 before:transition-all before:duration-500
before:absolute before:w-full before:h-full before:bg-[#5559CE]
${value >= idx ? "before:right-0" : "before:-right-full"}`}
@@ -23,7 +24,7 @@ function Step({ value }) {
<div className="z-10 delay-500">{item.icon}</div>
</div>
<p
className={`text-[16px]
className={`text-[10px] sm:text-[12px] md:text-[14px] lg:text-[16px] text-nowrap
${
value >= idx
? "font-bold text-[#5559CE]"
@@ -35,7 +36,7 @@ function Step({ value }) {
</div>
{list.length > idx + 1 && (
<span
className={`block rounded-[16px] transition-all duration-500 h-[2px] bg-[#EFEFEF] w-[100px]
className={`block rounded-[16px] transition-all duration-500 h-[2px] bg-[#EFEFEF] w-[35px] sm:w-[56px] md:w-[77px] lg:w-[100px]
relative overflow-hidden before:transition-all before:duration-500
before:absolute before:w-full before:h-full before:bg-[#5559CE] before:ease-linear
components/panel/addDoctor/index.js
+4 -4
View File
@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
import Step from "./Step";
function AddDoctorPage() {
const [value, setValue] = useState(2);
const [value, setValue] = useState(0);
const [data, setData] = useState({
general: {
name: { value: "احسان احمدی", isEdit: false },
@@ -80,8 +80,6 @@ function AddDoctorPage() {
],
});
console.log(data);
const components = [
<GeneralInformation
data={data}
@@ -114,7 +112,9 @@ function AddDoctorPage() {
md:pt-[30px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]"
>
<Step value={value} />
<div className="mt-[32px]">{components[value]}</div>
<div className="mt-[24px] md:mt-[28px] lg:mt-[32px]">
{components[value]}
</div>
</div>
</div>
);
components/panel/addDoctor/listMenu/generalInformation/form/index.js
+1 -1
View File
@@ -27,7 +27,7 @@ function Form({ setValue, parent, data, setData }) {
return (
<div>
<div className="mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
<div className="mt-[24px] md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
<ContentText text="نام و نام خانوادگی">
<EditField
isTransparent={true}
components/panel/addDoctor/listMenu/generalInformation/index.js
+1 -1
View File
@@ -3,7 +3,7 @@ import Head from "./Head";
function GeneralInformation({ setValue, parent, data, setData }) {
return (
<div className="opacity-page pb-[24px] px-[56px]">
<div className="opacity-page pb-[24px] px-0 md:px-[24px] lg:px-[56px]">
<Head />
<Form
parent={parent}
components/panel/addDoctor/listMenu/officeInformation/index.js
+1 -1
View File
@@ -5,7 +5,7 @@ import { checkAllValues } from "@/helper";
function OfficeInformation({ setValue, parent, data, setData }) {
return (
<div className="opacity-page pb-[24px] px-[56px]">
<div className="opacity-page pb-[24px] px-0 md:px-[24px] lg:px-[56px]">
<Form parent={parent} setData={setData} data={data.office} />
<div className="mt-[40px] w-full flex justify-end">
<Button
components/panel/userAccount/bank/List.js
+9 -11
View File
@@ -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
+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;
components/panel/userAccount/bank/head/index.js
+1 -1
View File
@@ -1,4 +1,4 @@
import ModalAddCard from "./modal/ModalAddCard";
import ModalAddCard from "./modal";
function Head() {
return (
components/panel/userAccount/bank/head/modal/Form.js
+1 -1
View File
@@ -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/ModalAddCard.js → components/panel/userAccount/bank/head/modal/index.js
+4 -4
View File
@@ -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
+2
View File
@@ -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>
);
}