design page general and office information & head panel

2024-09-11 04:17:39 +03:30
parent 62b355e52f
commit d75e3c82b7
33 changed files with 588 additions and 37 deletions
@@ -0,0 +1,68 @@
+'use client';
+
+import { useState } from "react";
+
+import { city, state } from "./listSelector";
+import EditField from "@/app/component/EditField";
+import ContentText from "@/components/panel/ContentText";
+import AddLocationP from "@/components/icons/AddLocationP";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+
+function Form() {
+
+    const [data, setData] = useState({
+        address: { value: '', isEdit: false },
+        phone: { value: 1741025645, isEdit: false },
+        office_number1: { value: '', isEdit: false },
+        office_number2: { value: '', isEdit: false },
+    });
+    const [selected, setSelected] = useState({
+        state: '',
+        city: '',
+    });
+    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="mt-[24px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
+            <ContentText text='استان'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='انتخاب کنید...'
+                    name='state'
+                    list={state}
+                />
+            </ContentText>
+            <ContentText text='شهر'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='انتخاب کنید...'
+                    name='city'
+                    list={city}
+                />
+            </ContentText>
+            <ContentText text='آدرس'>
+                <EditField icon={<AddLocationP />} isTransparent={true} placeholder='از روی نقشه انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.address} name='address' />
+            </ContentText>
+            <ContentText text='شماره موبایل'>
+                <EditField isTransparent={true} placeholder='شماره موبایل' iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
+            </ContentText>
+            <ContentText text='شماره مطب'>
+                <EditField isTransparent={true} placeholder='شماره مطب' iconGray={true} changeData={changeData} data={data?.office_number1} name='office_number1' />
+            </ContentText>
+            <ContentText text='شماره مطب'>
+                <EditField isTransparent={true} placeholder='شماره مطب' iconGray={true} changeData={changeData} data={data?.office_number2} name='office_number2' />
+            </ContentText>
+        </div>
+    )
+}
+
+export default Form
@@ -0,0 +1,22 @@
+import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
+import { Button } from "@mui/material";
+import Form from "./Form";
+
+function OfficeInformation() {
+    return (
+        <div className="opacity-page">
+            <Form />
+            <div className="mt-[40px] w-full flex justify-end">
+                <Button
+                    className="!bg-[#5559CE] !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
+                    variant="contained"
+                >
+                    ثبت اطلاعات
+                    <ArrowLeftPA />
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default OfficeInformation
@@ -0,0 +1,13 @@
+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 }
+];