From 2a98790ffd1d4dfe578cb184c0ba15dd62bd8edc Mon Sep 17 00:00:00 2001 From: Ehsan Date: Wed, 9 Oct 2024 20:20:03 +0330 Subject: [PATCH] deisgn page account bank header --- components/layout/header/list/col/BgGray.js | 2 +- components/panel/userAccount/Tab.js | 35 +++++++++++ .../panel/userAccount/{ => account}/Head.js | 0 .../userAccount/{ => account}/form/index.js | 2 +- .../{ => account}/form/listSelector.js | 0 components/panel/userAccount/account/index.js | 13 ++++ .../userAccount/bank/head/ModalAddCard.js | 60 +++++++++++++++++++ .../panel/userAccount/bank/head/index.js | 12 ++++ components/panel/userAccount/bank/index.js | 11 ++++ components/panel/userAccount/index.js | 22 +++++-- 10 files changed, 150 insertions(+), 7 deletions(-) create mode 100644 components/panel/userAccount/Tab.js rename components/panel/userAccount/{ => account}/Head.js (100%) rename components/panel/userAccount/{ => account}/form/index.js (98%) rename components/panel/userAccount/{ => account}/form/listSelector.js (100%) create mode 100644 components/panel/userAccount/account/index.js create mode 100644 components/panel/userAccount/bank/head/ModalAddCard.js create mode 100644 components/panel/userAccount/bank/head/index.js create mode 100644 components/panel/userAccount/bank/index.js diff --git a/components/layout/header/list/col/BgGray.js b/components/layout/header/list/col/BgGray.js index ae8e0b5..b352f2c 100644 --- a/components/layout/header/list/col/BgGray.js +++ b/components/layout/header/list/col/BgGray.js @@ -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 `} > ); diff --git a/components/panel/userAccount/Tab.js b/components/panel/userAccount/Tab.js new file mode 100644 index 0000000..4f6b5fe --- /dev/null +++ b/components/panel/userAccount/Tab.js @@ -0,0 +1,35 @@ +import Tabs from "@/app/component/Tabs"; + +function Tab({ value, listTab, handleChange }) { + return ( + + ); +} + +export default Tab; diff --git a/components/panel/userAccount/Head.js b/components/panel/userAccount/account/Head.js similarity index 100% rename from components/panel/userAccount/Head.js rename to components/panel/userAccount/account/Head.js diff --git a/components/panel/userAccount/form/index.js b/components/panel/userAccount/account/form/index.js similarity index 98% rename from components/panel/userAccount/form/index.js rename to components/panel/userAccount/account/form/index.js index c53cdff..488da7c 100644 --- a/components/panel/userAccount/form/index.js +++ b/components/panel/userAccount/account/form/index.js @@ -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"; diff --git a/components/panel/userAccount/form/listSelector.js b/components/panel/userAccount/account/form/listSelector.js similarity index 100% rename from components/panel/userAccount/form/listSelector.js rename to components/panel/userAccount/account/form/listSelector.js diff --git a/components/panel/userAccount/account/index.js b/components/panel/userAccount/account/index.js new file mode 100644 index 0000000..bb50158 --- /dev/null +++ b/components/panel/userAccount/account/index.js @@ -0,0 +1,13 @@ +import Form from "./form"; +import Head from "./Head"; + +function Account() { + return ( + <> + +
+ + ); +} + +export default Account; diff --git a/components/panel/userAccount/bank/head/ModalAddCard.js b/components/panel/userAccount/bank/head/ModalAddCard.js new file mode 100644 index 0000000..890e871 --- /dev/null +++ b/components/panel/userAccount/bank/head/ModalAddCard.js @@ -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 ( +
+ {/* Button Modal */} + + {/* Content Modal */} + + +
+

+ اضافه کردن شماره کارت +

+ +
+
+ + +
+ + +
+ ); +} + +export default ModalAddCard; diff --git a/components/panel/userAccount/bank/head/index.js b/components/panel/userAccount/bank/head/index.js new file mode 100644 index 0000000..2cf267c --- /dev/null +++ b/components/panel/userAccount/bank/head/index.js @@ -0,0 +1,12 @@ +import ModalAddCard from "./ModalAddCard"; + +function Head() { + return ( +
+

کارت های بانکی شما

+ +
+ ); +} + +export default Head; diff --git a/components/panel/userAccount/bank/index.js b/components/panel/userAccount/bank/index.js new file mode 100644 index 0000000..2f2a1e4 --- /dev/null +++ b/components/panel/userAccount/bank/index.js @@ -0,0 +1,11 @@ +import Head from "./head"; + +function Bank() { + return ( +
+ +
+ ); +} + +export default Bank; diff --git a/components/panel/userAccount/index.js b/components/panel/userAccount/index.js index fb629e4..fdea3fa 100644 --- a/components/panel/userAccount/index.js +++ b/components/panel/userAccount/index.js @@ -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 = [, ]; -function UserAccountPage({ data }) { return (
- - + +
{components[value]}
); }