change design all page & component page booking and account & cleancode

2024-09-01 20:43:53 +03:30
parent 2afd79b84d
commit bb154ac63f
46 changed files with 685 additions and 523 deletions
@@ -1,16 +1,74 @@
-import Address from "./Address";
-import Head from "./Head";
+import { useState } from "react";
+import { Button } from "@mui/material";
+import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
+import ArrowLeftB from "@/components/icons/ArrowLeftB";
+import ButtonFixed from "../paying/ButtonFixed";
+import Form from "./Form";
+
+function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeElement, setIsPay }) {
+
+    const [selected, setSelected] = useState({
+        first: '',
+        second: ''
+    });
+
+    const changeData = (value, type, name) =>
+        setData({
+            ...data,
+            [name]: {
+                ...data[name],
+                [type]: value
+            }
+        });
+
+    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })

-function Detail({ doctor }) {
    return (
-        <div className="h-fit lg:h-screen w-full lg:w-[39%]">
+        // ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
+        <div className="w-full lg:w-[59%]">
            <div
-                className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
-                top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
+                className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
+            rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
+            `}
            >
-                <Head doctor={doctor} />
-                <span className="block w-full bg-[#EFEFEF] h-px my-[16px]"></span>
-                <Address doctor={doctor} />
+                <p className="text-[#3B3B3B] text-[20px] font-bold">
+                    {isForAnother ? 'اطلاعات کاربر جدید' : 'اطلاعات حساب کاربری'}
+                </p>
+                <Form
+                    isForAnother={isForAnother}
+                    updateSelect={updateSelect}
+                    changeData={changeData}
+                    data={data}
+                />
+                {!isForAnother && (
+                    <Button
+                        className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
+                        onClick={() => {
+                            setIsForAnother(true)
+                            setData({
+                                phone: { value: '09121056987', isEdit: false },
+                                codemeli: { value: '1741025645', isEdit: false },
+                                name: { value: 'ساغر صابری نژاد', isEdit: false }
+                            });
+                        }}
+                    >
+                        <AddCircleBlueA />
+                        <p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
+                    </Button>
+                )}
+                <ButtonFixed>
+                    <Button
+                        className={`
+                    !flex !w-full md:!w-fit
+                    !gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px]
+                    ${isForAnother ? '!mt-0 md:!mt-[40px]' : '!mt-0 md:!mt-[32px]'}`}
+                        variant="contained"
+                        onClick={() => setStep(prev => prev + 1)}
+                    >
+                        <p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
+                        <ArrowLeftB />
+                    </Button>
+                </ButtonFixed>
            </div>
        </div>
    )