update design page doctor item & design page account & success and failed pay

2024-08-28 03:14:42 +03:30
parent 7925493681
commit 6384dd10b6
20 changed files with 1106 additions and 56 deletions
@@ -3,7 +3,7 @@ import Head from "./Head"

 function DetailDoctor({ doctor }) {
    return (
-        <div className="p-[24px] w-[41%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
+        <div className="p-[24px] opacity-page w-[41%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
            <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
            <Head doctor={doctor} />
            <Detail doctor={doctor} />
@@ -4,8 +4,7 @@ import { Button } from "@mui/material";
 import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";

-function Detail({ isForAnother, setIsForAnother, setIsPay }) {
-
+function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {

    const [selected, setSelected] = useState({
        first: '',
@@ -43,7 +42,7 @@ function Detail({ isForAnother, setIsForAnother, setIsPay }) {
                <Button
                    className="!flex !items-center !justify-start !gap-[8px] !mt-[24px] !p-1"
                    onClick={() => {
-                        setIsForAnother(true);
+                        fadeElement(() => setIsForAnother(true))
                        setData({
                            phone: { value: '09121056987', isEdit: false },
                            codemeli: { value: '1741025645', isEdit: false },
@@ -60,7 +59,7 @@ function Detail({ isForAnother, setIsForAnother, setIsPay }) {
                    !gap-[4px] !mr-auto !flex !px-[12px] !py-[8px] !min-w-[150px] 
                    ${isForAnother ? '!mt-[94px]' : '!mt-[32px]'}`}
                variant="contained"
-                onClick={() => setIsPay(true)}
+                onClick={() => fadeElement(() => setIsPay(true))}
            >
                <p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
                <ArrowLeftB />
@@ -7,19 +7,42 @@ import Payment from "./payment";
 function Information() {

    const [isForAnother, setIsForAnother] = useState(false)
+    const [typePay, setTypePay] = useState('success');
+    const [isPay, setIsPay] = useState(true);
+    const [fade, setFade] = useState(false);

-    const [isPay, setIsPay] = useState(false);
+    const fadeElement = (func) => {
+        setFade(true);
+
+        const timeout = setTimeout(() => {
+            func()
+            setFade(false);
+        }, 1000);
+
+        return () => clearTimeout(timeout);
+    }

    return (
-        <div className="w-[59%] p-[24px] bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
-            {isPay ?
-                <Payment /> :
-                <Detail
-                    setIsPay={setIsPay}
-                    isForAnother={isForAnother}
-                    setIsForAnother={setIsForAnother}
-                />
-            }
+        <div
+            className={`w-[59%] opacity-page p-[24px] bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]
+            `}
+        >
+            <div className={`transition-opacity !duration-300 ease-in ${fade ? '!opacity-0' : '!opacity-100'}`}>
+                {isPay ?
+                    <Payment
+                        typePay={typePay}
+                        setIsPay={setIsPay}
+                        setTypePay={setTypePay}
+                        fadeElement={fadeElement}
+                    /> :
+                    <Detail
+                        setIsPay={setIsPay}
+                        fadeElement={fadeElement}
+                        isForAnother={isForAnother}
+                        setIsForAnother={setIsForAnother}
+                    />
+                }
+            </div>
        </div>
    )
 }
@@ -1,6 +1,34 @@
-function FailedPay() {
+import InfoCircleRedA from "@/components/icons/InfoCircleRedA"
+import RedoA from "@/components/icons/RedoA"
+import RefreshA from "@/components/icons/RefreshA"
+import { Button } from "@mui/material"
+
+function FailedPay({ setTypePay, setIsPay, fadeElement }) {
    return (
-        <div>FailedPay</div>
+        <div className="mt-[7px]">
+            <div className="flex flex-col justify-center items-center gap-[14px]">
+                <InfoCircleRedA />
+                <p className="text-[#D32F2F] text-[20px] font-bold">پرداخت شما انجام نشد.</p>
+            </div>
+            <div className="flex mt-[24px] items-center justify-center gap-[24px]">
+                <Button
+                    variant="outlined"
+                    onClick={() => fadeElement(() => setIsPay(false))}
+                    className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
+                >
+                    <RedoA />
+                    <p className="text-[#5559CE] text-[16px] font-medium">صفحه اصلی</p>
+                </Button>
+                <Button
+                    variant="contained"
+                    onClick={() => fadeElement(() => setTypePay('default'))}
+                    className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
+                >
+                    <RefreshA />
+                    <p className="text-[#FAFAFA] text-[16px] font-medium">تلاش دوباره</p>
+                </Button>
+            </div>
+        </div>
    )
 }

@@ -1,7 +1,7 @@
 import ArrowLeftB from '@/components/icons/ArrowLeftB';
 import { Button } from '@mui/material';

-function Paying({ setTypePay }) {
+function Paying({ setTypePay, fadeElement }) {
    return (
        <>
            <p className="text-[#3B3B3B] text-[20px] font-bold">
@@ -16,7 +16,7 @@ function Paying({ setTypePay }) {
                <p className='text-[#3B3B3B] text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
                <Button
                    className='!gap-[4px] !mr-auto !flex !px-[12px] !py-[9px] !min-w-[157px]'
-                    onClick={() => setTypePay(true)}
+                    onClick={() => fadeElement(() => setTypePay('success'))}
                    variant="contained"
                >
                    <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
@@ -1,6 +1,23 @@
+import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA"
+import TickCircleGreenA from "@/components/icons/TickCircleGreenA"
+import { Button } from "@mui/material"
+
 function SuccessPay() {
    return (
-        <div>SuccessPay</div>
+        <div className="pt-[8px] pb-[4px] grid place-items-center">
+            <div className="flex flex-col justify-center items-center gap-[14px]">
+                <TickCircleGreenA />
+                <p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p>
+            </div>
+            <p className="text-[#3B3B3B] text-[16px] font-normal mt-[32px] mb-[16px]">برای نمایش نوبت ها به قسمت نوبت های من بروید.  </p>
+            <Button
+                variant="text"
+                className="!flex !items-center !justify-center !gap-[4px]"
+            >
+                <p className="text-[16px] font-medium text-[#5559CE]">برو به نوبت های من</p>
+                <ArrowLeftBlueA />
+            </Button>
+        </div>
    )
 }

@@ -1,19 +1,24 @@
 import { useState } from "react";
+
 import SuccessPay from "./SuccessPay";
 import FailedPay from "./FailedPay";
 import Paying from "./Paying";

-function Payment() {
-
-    const [typePay, setTypePay] = useState('default');
-
+function Payment({ setIsPay, fadeElement, typePay, setTypePay }) {
    return (
        <>
            {typePay === 'default' ?
-                <Paying setTypePay={setTypePay} /> :
+                <Paying
+                    setTypePay={setTypePay}
+                    fadeElement={fadeElement}
+                /> :
                typePay === 'success' ?
                    <SuccessPay /> :
-                    <FailedPay />
+                    <FailedPay
+                        setIsPay={setIsPay}
+                        setTypePay={setTypePay}
+                        fadeElement={fadeElement}
+                    />
            }
        </>
    )
@@ -6,7 +6,7 @@ function AboutDcotor({ doctor }) {
                className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
            ></a>
            <p className="text-[#616161] text-[14px] font-normal text-justify">{doctor.detail}</p>
-            <div className="my-2">
+            <div className="mt-2 mb-8">
                <p className="text-[#525252] text-[16px] font-bold">تخصص ها</p>
                <ul className="flex flex-wrap gap-y-1 items-center justify-start gap-4">
                    {doctor.specialties.map((item, idx) => (
@@ -1,26 +0,0 @@
-function LocationDoctor({ doctor }) {
-    return (
-        <div>
-            <a
-                id="location"
-                className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
-            ></a>
-            <div className="mb-[16px] mt-[32px]">
-                <p className="text-[#525252] text-[20px] font-bold">موقعیت مکانی </p>
-            </div>
-            <div className="gap-4 flex flex-col items-start">
-                <p className="text-[#525252] text-[16px] font-normal">آدرس: {doctor.location}</p>
-                <p className="text-[#525252] text-[16px] font-normal">تلفن: {doctor.phone}</p>
-                <p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {doctor.hours_of_work}</p>
-            </div>
-            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12959.6445083469!2d51.33890241984384!3d35.70380456224644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8dfe05732c2e91%3A0xfcbec017befd15f4!2sAzadi%20Tower!5e0!3m2!1sen!2snl!4v1700601294504!5m2!1sen!2snl"
-                className='w-full h-[470px] rounded-lg my-4'
-                allowFullScreen=""
-                loading="lazy"
-                referrerPolicy="no-referrer-when-downgrade"
-            ></iframe>
-        </div>
-    )
-}
-
-export default LocationDoctor
@@ -4,7 +4,7 @@ import Comment from '@/app/component/comment'

 function Comments({ doctor }) {
    return (
-        <div className='mt-4'>
+        <div className='mt-8'>
            <a
                id="comments"
                className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@mui/material';
+import ArrowBottomGrayD from '@/components/icons/ArrowBottomGrayD';
+
+function Item({ data }) {
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <>
+            <a
+                id="location"
+                className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
+            ></a>
+            <Button
+                variant='texts'
+                onClick={() => setIsOpen(!isOpen)}
+                className="!px-[2px] !py-[4px] !flex !items-center !justify-between !w-full"
+            >
+                <p className="text-[#616161] text-[16px] font-medium">{data.title}</p>
+                <div
+                    className={`
+                        transition-all duration-500
+                        ${isOpen ?
+                            'rotate-180' :
+                            'rotate-0'}
+                    `}
+                >
+                    <ArrowBottomGrayD />
+                </div>
+            </Button>
+            <div
+                className={`
+                    overflow-hidden transition-all duration-500
+                    ${isOpen ?
+                        'max-h-screen ' :
+                        'max-h-0'}
+                `}
+            >
+                <div className="gap-4 flex flex-col items-start mt-[24px]">
+                    <p className="text-[#525252] text-[16px] font-normal">آدرس: {data.address}</p>
+                    <p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
+                    <p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
+                </div>
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
+                    className='w-full h-[470px] rounded-lg mt-4'
+                    allowFullScreen=""
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
+                ></iframe>
+            </div>
+        </>
+    )
+}
+
+export default Item
@@ -0,0 +1,26 @@
+import Item from "./Item"
+
+function Locations({ doctor }) {
+    return (
+        <div>
+            <p
+                className="text-[#525252] text-[20px] font-bold"
+            >موقعیت مکانی </p>
+            <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
+                {doctor.locations.map((item, idx) => (
+                    <li className="w-full">
+                        <Item
+                            key={idx}
+                            data={item}
+                        />
+                        {doctor.locations.length > idx + 1 && (
+                            <span className="w-full h-px bg-[#EFEFEF] block my-[16px]"></span>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export default Locations
@@ -3,7 +3,7 @@ import Share from "./Share"
 import Title from "./Title"
 import AboutDcotor from "./cards/AboutDcotor"
 import Comments from "./cards/comments"
-import LocationDoctor from "./cards/LocationDoctor"
+import Locations from "./cards/locations"

 function DetailDoctor({ doctor }) {
    return (
@@ -14,7 +14,7 @@ function DetailDoctor({ doctor }) {
            <Title doctor={doctor} />
            <Link />
            <AboutDcotor doctor={doctor} />
-            <LocationDoctor doctor={doctor} />
+            <Locations doctor={doctor} />
            <Comments doctor={doctor} />
        </div>
    )
@@ -0,0 +1,9 @@
+function ArrowBottomGrayD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M16.5999 7.45834L11.1666 12.8917C10.5249 13.5333 9.4749 13.5333 8.83324 12.8917L3.3999 7.45834" stroke="#616161" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowBottomGrayD
@@ -0,0 +1,10 @@
+function ArrowLeftBlueA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M7.97435 4.94168L2.91602 10L7.97435 15.0583" stroke="#5559CE" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M17.0836 10H3.05859" stroke="#5559CE" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowLeftBlueA
@@ -0,0 +1,9 @@
+function InfoCircleRedA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none">
+            <path d="M17.7805 22.6516L17.8001 22.634L17.8177 22.6144C17.964 22.4518 18.0956 22.269 18.1902 22.026C18.2767 21.8164 18.3327 21.58 18.3327 21.3333C18.3327 21.0841 18.2755 20.8455 18.1876 20.6343C18.0984 20.4204 17.9741 20.226 17.8177 20.0521L17.8001 20.0326L17.7805 20.015C17.6067 19.8585 17.4123 19.7342 17.1983 19.6451C16.7552 19.4605 16.2435 19.4605 15.8004 19.6451C15.5864 19.7342 15.392 19.8585 15.2182 20.015L15.1986 20.0326L15.181 20.0521C15.0246 20.226 14.9003 20.4204 14.8111 20.6343C14.7232 20.8455 14.666 21.0841 14.666 21.3333C14.666 21.58 14.722 21.8164 14.8085 22.026C14.9031 22.269 15.0347 22.4518 15.181 22.6144L15.1986 22.634L15.2182 22.6516C15.392 22.808 15.5864 22.9324 15.8004 23.0215C16.0115 23.1095 16.2502 23.1666 16.4993 23.1666C16.7485 23.1666 16.9872 23.1095 17.1983 23.0215C17.4123 22.9324 17.6067 22.808 17.7805 22.6516ZM3.66602 16C3.66602 8.92944 9.42882 3.16663 16.4993 3.16663C23.5699 3.16663 29.3327 8.92944 29.3327 16C29.3327 23.0705 23.5699 28.8333 16.4993 28.8333C9.42882 28.8333 3.66602 23.0705 3.66602 16ZM16.4993 9.16663C15.6765 9.16663 14.9993 9.84382 14.9993 10.6666V17.3333C14.9993 18.1561 15.6765 18.8333 16.4993 18.8333C17.3222 18.8333 17.9993 18.1561 17.9993 17.3333V10.6666C17.9993 9.84382 17.3222 9.16663 16.4993 9.16663Z" fill="#D32F2F" stroke="#D32F2F" />
+        </svg>
+    )
+}
+
+export default InfoCircleRedA
@@ -0,0 +1,10 @@
+function RedoA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M14.0579 15.2584H7.39128C5.09128 15.2584 3.22461 13.3917 3.22461 11.0917C3.22461 8.79172 5.09128 6.92505 7.39128 6.92505H16.5579" stroke="#5559CE" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M14.6426 9.00837L16.7759 6.87503L14.6426 4.7417" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default RedoA
@@ -0,0 +1,9 @@
+function RefreshA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M18.3327 9.99996C18.3327 14.6 14.5993 18.3333 9.99935 18.3333C5.39935 18.3333 2.59102 13.7 2.59102 13.7M2.59102 13.7H6.35768M2.59102 13.7V17.8666M1.66602 9.99996C1.66602 5.39996 5.36602 1.66663 9.99935 1.66663C15.5577 1.66663 18.3327 6.29996 18.3327 6.29996M18.3327 6.29996V2.13329M18.3327 6.29996H14.6327" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default RefreshA
@@ -0,0 +1,9 @@
+function TickCircleGreenA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+            <path d="M22.7262 13.2869L22.7263 13.2869L22.7322 13.2808C23.3029 12.6904 23.3114 11.7516 22.7262 11.1665C22.1443 10.5845 21.1877 10.5845 20.6058 11.1665L14.106 17.6662L11.3929 14.9531C10.811 14.3712 9.85439 14.3712 9.27246 14.9531C8.69053 15.535 8.69053 16.4916 9.27246 17.0736L13.0458 20.8469C13.3252 21.1263 13.7052 21.2867 14.106 21.2867C14.5068 21.2867 14.8869 21.1263 15.1662 20.8469L22.7262 13.2869ZM3.16602 16C3.16602 8.92948 8.92882 3.16667 15.9993 3.16667C23.0699 3.16667 28.8327 8.92948 28.8327 16C28.8327 23.0705 23.0699 28.8333 15.9993 28.8333C8.92882 28.8333 3.16602 23.0705 3.16602 16Z" fill="#05BA58" stroke="#05BA58" />
+        </svg>
+    )
+}
+
+export default TickCircleGreenA