deisgn page account bank header
This commit is contained in:
Ehsan
@@ -8,7 +8,7 @@ function BgGray({ isActive, setIsActive }) {
|
|||||||
? "bg-[#232323] opacity-40 flex"
|
? "bg-[#232323] opacity-40 flex"
|
||||||
: "bg-transparent opacity-40 hidden"
|
: "bg-transparent opacity-40 hidden"
|
||||||
}
|
}
|
||||||
absolute z-[5] cursor-pointer transition-all duration-500 left-0 top-[-12px] sm:top-[-21px] md:top-[-30px] lg:top-[-40px] w-screen h-screen
|
absolute z-[5] cursor-pointer transition-all duration-500 left-0 top-0 w-screen h-screen
|
||||||
`}
|
`}
|
||||||
></div>
|
></div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import Tabs from "@/app/component/Tabs";
|
||||||
|
|
||||||
|
function Tab({ value, listTab, handleChange }) {
|
||||||
|
return (
|
||||||
|
<Tabs
|
||||||
|
isSm={false}
|
||||||
|
style={{
|
||||||
|
".MuiTabs-indicator": {
|
||||||
|
height: "2px",
|
||||||
|
borderRadius: "16px",
|
||||||
|
background: "#5559CE",
|
||||||
|
},
|
||||||
|
"& .MuiTabs-flexContainer": {
|
||||||
|
borderBottom: "2px solid #EFEFEF",
|
||||||
|
},
|
||||||
|
"& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
|
||||||
|
color: "#5559CE !important",
|
||||||
|
},
|
||||||
|
"& .MuiButtonBase-root": {
|
||||||
|
fontWeight: "400 !important",
|
||||||
|
},
|
||||||
|
"& .MuiButtonBase-root.Mui-selected": {
|
||||||
|
color: "#5559CE !important",
|
||||||
|
fontWeight: "700 !important",
|
||||||
|
transition: "0.3s all !important",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
value={value}
|
||||||
|
listTab={listTab}
|
||||||
|
handleChange={handleChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Tab;
|
||||||
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
import ContentText from "../../ContentText";
|
import ContentText from "../../../ContentText";
|
||||||
import EditField from "@/app/component/EditField";
|
import EditField from "@/app/component/EditField";
|
||||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||||
import { bank, city, state } from "./listSelector";
|
import { bank, city, state } from "./listSelector";
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import Form from "./form";
|
||||||
|
import Head from "./Head";
|
||||||
|
|
||||||
|
function Account() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head />
|
||||||
|
<Form />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Account;
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
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";
|
||||||
|
|
||||||
|
function ModalAddCard() {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const handleOpen = () => setOpen(true);
|
||||||
|
const handleClose = () => setOpen(false);
|
||||||
|
|
||||||
|
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] !px-[24px]"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<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;
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import ModalAddCard from "./ModalAddCard";
|
||||||
|
|
||||||
|
function Head() {
|
||||||
|
return (
|
||||||
|
<div className="w-full flex items-center justify-between">
|
||||||
|
<p className="text-[#525252] text-[20px] font-bold">کارت های بانکی شما</p>
|
||||||
|
<ModalAddCard />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Head;
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import Head from "./head";
|
||||||
|
|
||||||
|
function Bank() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Head />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Bank;
|
||||||
@@ -1,7 +1,19 @@
|
|||||||
import Form from "./form";
|
"use client";
|
||||||
import Head from "./Head";
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import Account from "./account";
|
||||||
|
import Bank from "./bank";
|
||||||
|
import Tab from "./Tab";
|
||||||
|
|
||||||
|
const listTab = ["حساب کاربری", "حساب بانکی"];
|
||||||
|
|
||||||
|
function UserAccountPage() {
|
||||||
|
const [value, setValue] = useState(1);
|
||||||
|
|
||||||
|
const handleChange = (event, newValue) => setValue(newValue);
|
||||||
|
|
||||||
|
const components = [<Account />, <Bank />];
|
||||||
|
|
||||||
function UserAccountPage({ data }) {
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="
|
className="
|
||||||
@@ -10,8 +22,8 @@ function UserAccountPage({ data }) {
|
|||||||
px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px] dark:shadow-[0px_4px_25px_10px_#1F1D2B] dark:bg-transparent md:dark:bg-[#222433]
|
px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px] dark:shadow-[0px_4px_25px_10px_#1F1D2B] dark:bg-transparent md:dark:bg-[#222433]
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<Head />
|
<Tab listTab={listTab} handleChange={handleChange} value={value} />
|
||||||
<Form />
|
<div className="mt-[22px]">{components[value]}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user