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,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,81 @@
+import { useState } from "react";
+import ContentText from "@/components/panel/ContentText";
+import EditField from "@/app/component/EditField";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import { degree } from "./listSelector";
+import CalendarPD from "@/components/icons/CalendarPD";
+import RadioGender from "./RadioGender";
+import { Button } from "@mui/material";
+import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
+
+function Form() {
+
+    const [data, setData] = useState({
+        name: { value: 'احسان احمدی', isEdit: false },
+        medical_system_number: { value: 1741025645, isEdit: false },
+        expertise: { value: 'دندان پزشکی', isEdit: false },
+        description: { value: '', isEdit: false },
+        skills: { value: '', isEdit: false },
+        time_work: { value: '', isEdit: false },
+    });
+    const [selected, setSelected] = useState({
+        degree: '',
+    });
+    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
+
+    const changeData = (value, type, name) =>
+        setData({
+            ...data,
+            [name]: {
+                ...data[name],
+                [type]: value
+            }
+        });
+
+    return (
+        <div>
+            <div className="mt-[28px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
+                <ContentText text='نام و نام خانوادگی'>
+                    <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
+                </ContentText>
+                <ContentText text='شماره نظام پزشکی'>
+                    <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.medical_system_number} name='medical_system_number' />
+                </ContentText>
+                <ContentText text='تخصص'>
+                    <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.expertise} name='expertise' />
+                </ContentText>
+                <ContentText text='مدرک'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='degree'
+                        list={degree}
+                    />
+                </ContentText>
+                <ContentText text='توضیحات'>
+                    <EditField multiline={5} placeholder='درباره سوابق خود توضیحاتی بنویسید...' isTransparent={true} iconGray={true} changeData={changeData} data={data?.description} name='description' />
+                </ContentText>
+                <ContentText text='مهارت ها'>
+                    <EditField multiline={5} placeholder='مهارت های خود را بنویسید...' isTransparent={true} iconGray={true} changeData={changeData} data={data?.skills} name='skills' />
+                </ContentText>
+                <ContentText text='جنسیت'>
+                    <RadioGender />
+                </ContentText>
+                <ContentText text='زمان شروع به کار'>
+                    <EditField icon={<CalendarPD />} isTransparent={true} placeholder='انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.time_work} name='time_work' />
+                </ContentText>
+            </div>
+            <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 Form
@@ -0,0 +1,21 @@
+import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
+
+function RadioGender() {
+    return (
+        <RadioGroup
+            dir="ltr"
+            className="!flex !flex-row !gap-[36px] !items-center !justify-start"
+            defaultValue='female'
+            sx={{
+                '& .muirtl-j204z7-MuiFormControlLabel-root': {
+                    marginLeft: '0 !important'
+                }
+            }}
+        >
+            <FormControlLabel value="male" control={<Radio />} label="مرد" />
+            <FormControlLabel value="female" control={<Radio />} label="زن" />
+        </RadioGroup>
+    )
+}
+
+export default RadioGender
@@ -0,0 +1,6 @@
+export const degree = [
+    { label: 'مدرک 1', id: 10 },
+    { label: 'مدرک 2', id: 20 },
+    { label: 'مدرک 3', id: 30 },
+    { label: 'مدرک 4', id: 40 }
+];
@@ -0,0 +1,13 @@
+import Form from "./form/Form";
+import Head from "./Head";
+
+function GeneralInformation() {
+    return (
+        <div className="opacity-page">
+            <Head />
+            <Form />
+        </div>
+    )
+}
+
+export default GeneralInformation