change layout and router panel & design page dashboard and user account

2024-09-10 21:38:07 +03:30
parent dffdab7139
commit 62b355e52f
44 changed files with 370 additions and 97 deletions
@@ -0,0 +1,22 @@
+import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
+import ProfileP from "@/components/icons/ProfileP";
+import { Button } from "@mui/material";
+
+function Head() {
+    return (
+        <div className="flex items-center justify-start gap-[10px]">
+            <div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
+                <ProfileP />
+            </div>
+            <Button
+                variant="text"
+                className="!flex !p-1 !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
+            >
+                انتخاب تصویر
+                <ArrowLeftPU />
+            </Button>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,10 @@
+function Content({ children, text }) {
+    return (
+        <div className="flex flex-col items-start justify-start gap-[16px]">
+            <p className="text-[#525252] text-[14px] font-medium">{text}</p>
+            {children}
+        </div>
+    )
+}
+
+export default Content
@@ -0,0 +1,94 @@
+'use client';
+
+import { useState } from "react";
+
+import Content from "./Content";
+import EditField from "@/app/component/EditField";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import { bank, city, state } from "./listSelector";
+import AddLocationP from "@/components/icons/AddLocationP";
+import { Button } from "@mui/material";
+import ArrowLeftButtonP from "@/components/icons/ArrowLeftButtonP";
+
+function Form() {
+
+    const [data, setData] = useState({
+        name: { value: 'احسان احمدی', isEdit: false },
+        national_code: { value: '123456789', isEdit: false },
+        address: { value: '', isEdit: false },
+        phone: { value: '', isEdit: false },
+        account_number: { value: '', isEdit: false },
+    });
+    const [selected, setSelected] = useState({
+        state: '',
+        city: '',
+        bank: ''
+    });
+    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
+
+    const changeData = (value, type, name) =>
+        setData({
+            ...data,
+            [name]: {
+                ...data[name],
+                [type]: value
+            }
+        });
+
+    return (
+        <div className="flex flex-col items-start justify-start gap-[48px]">
+            <ul className="grid w-full grid-cols-2 mt-[32px] gap-x-[48px] gap-y-[32px]">
+                <Content text='نام و نام خانوادگی'>
+                    <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
+                </Content>
+                <Content text='کد ملی'>
+                    <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
+                </Content>
+                <Content text='استان'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='state'
+                        list={state}
+                    />
+                </Content>
+                <Content text='شهر'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='city'
+                        list={city}
+                    />
+                </Content>
+                <Content text='آدرس'>
+                    <EditField icon={<AddLocationP />} isTransparent={true} placeholder='از روی نقشه انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.address} name='address' />
+                </Content>
+                <Content text='شماره موبایل'>
+                    <EditField isTransparent={true} placeholder='شماره موبایل' iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
+                </Content>
+                <Content text='شماره حساب'>
+                    <EditField isTransparent={true} placeholder='شماره حساب' iconGray={true} changeData={changeData} data={data?.account_number} name='account_number' />
+                </Content>
+                <Content text='شهر'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='bank'
+                        list={bank}
+                    />
+                </Content>
+            </ul>
+            <div className="w-full flex justify-end">
+                <Button
+                    variant="contained"
+                    className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !shadow-none !text-[#EFEFEF] !text-[16px] !font-medium"
+                >
+                    ثبت اطلاعات
+                    <ArrowLeftButtonP />
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default Form
@@ -0,0 +1,20 @@
+export const state = [
+    { label: 'استان 1', id: 10 },
+    { label: 'استان 2', id: 20 },
+    { label: 'استان 3', id: 30 },
+    { label: 'استان 4', id: 40 }
+];
+
+export const city = [
+    { label: 'شهر 1', id: 10 },
+    { label: 'شهر 2', id: 20 },
+    { label: 'شهر 3', id: 30 },
+    { label: 'شهر 4', id: 40 }
+];
+
+export const bank = [
+    { label: 'بانک 1', id: 10 },
+    { label: 'بانک 2', id: 20 },
+    { label: 'بانک 3', id: 30 },
+    { label: 'بانک 4', id: 40 }
+];
@@ -0,0 +1,13 @@
+import Form from "./form";
+import Head from "./Head";
+
+function UserAccountPage({ data }) {
+    return (
+        <div className="opacity-page rounded-[8px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] px-[112px] py-[32px]">
+            <Head />
+            <Form />
+        </div>
+    )
+}
+
+export default UserAccountPage