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-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>
|
||||
);
|
||||
|
||||
@@ -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 ContentText from "../../ContentText";
|
||||
import ContentText from "../../../ContentText";
|
||||
import EditField from "@/app/component/EditField";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
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";
|
||||
import Head from "./Head";
|
||||
"use client";
|
||||
|
||||
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 (
|
||||
<div
|
||||
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]
|
||||
"
|
||||
>
|
||||
<Head />
|
||||
<Form />
|
||||
<Tab listTab={listTab} handleChange={handleChange} value={value} />
|
||||
<div className="mt-[22px]">{components[value]}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user