add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,60 +1,61 @@
|
||||
import CircularLoading from '@/app/component/loading/Circular'
|
||||
import TextLoading from '@/app/component/loading/Text'
|
||||
import ArrowLeftD from '@/components/icons/ArrowLeftD'
|
||||
import GreenCalendarTurn from '@/components/icons/GreenCalendarTurn'
|
||||
import { Button } from '@mui/material'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD";
|
||||
import GreenCalendarTurn from "@/components/icons/GreenCalendarTurn";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
function ItemAppointment({ turn, doctor, loading }) {
|
||||
return (
|
||||
<li
|
||||
key={turn.id}
|
||||
className='py-4 w-full px-6 bg-[#FFF] border border-solid border-[#EFEFEF] rounded-lg'
|
||||
>
|
||||
<p className='text-[#3B3B3B] text-[20px] font-bold'>نوبت دهی</p>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] my-4'></span>
|
||||
<div className='flex items-center justify-start gap-3'>
|
||||
<CircularLoading width={56} height={56} loading={loading}>
|
||||
<Image
|
||||
src={doctor.img}
|
||||
width={56}
|
||||
height={56}
|
||||
alt='doctor'
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className='flex flex-col items-start justify-center gap-2'>
|
||||
<TextLoading width={60} height={15} loading={loading}>
|
||||
<p className='text-[#3B3B3B] text-[14px] font-bold'>{doctor.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading width={65} height={15} loading={loading}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
return (
|
||||
<li
|
||||
key={turn.id}
|
||||
className="py-4 w-full px-6 bg-[#FFF] border border-solid border-[#EFEFEF] rounded-lg"
|
||||
>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">نوبت دهی</p>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] my-4"></span>
|
||||
<div className="flex items-center justify-start gap-3">
|
||||
<CircularLoading width={56} height={56} loading={loading}>
|
||||
<Image src={doctor.img} width={56} height={56} alt="doctor" />
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-2">
|
||||
<TextLoading width={60} height={15} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">
|
||||
{doctor.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading width={65} height={15} loading={loading}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">
|
||||
تخصص: {doctor.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex mt-5 gap-2 items-center justify-between">
|
||||
<div className="flex items-start justify-start gap-1">
|
||||
<GreenCalendarTurn />
|
||||
<TextLoading width={100} height={15} loading={loading}>
|
||||
<p className="text-[#05BA58] text-[12px] font-medium">
|
||||
اولین نوبت آزاد: {turn.first_free_turn}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<Link href={loading ? "#" : `/booking/${turn.id}`}>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!py-2 !px-3 xl:!px-6 gap-1"
|
||||
disabled={loading}
|
||||
>
|
||||
دریافت نوبت
|
||||
<div className="w-[20px] h-[20px]">
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
<div className='flex mt-5 gap-2 items-center justify-between'>
|
||||
<div className='flex items-start justify-start gap-1'>
|
||||
<GreenCalendarTurn />
|
||||
<TextLoading width={100} height={15} loading={loading}>
|
||||
<p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<Link href={loading ? '#' : `/booking/${turn.id}`}>
|
||||
<Button
|
||||
variant='contained'
|
||||
className='!py-2 !px-3 xl:!px-6 gap-1'
|
||||
disabled={loading}
|
||||
>
|
||||
دریافت نوبت
|
||||
<div className='w-[20px] h-[20px]'>
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemAppointment
|
||||
export default ItemAppointment;
|
||||
|
||||
@@ -1,46 +1,47 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import turns from '@/data/turns.json';
|
||||
import { Button } from '@mui/material';
|
||||
import ItemAppointment from './ItemAppointment';
|
||||
import ArrowLeftD from '@/components/icons/ArrowLeftD';
|
||||
import Link from 'next/link';
|
||||
import turns from "@/data/turns.json";
|
||||
import { Button } from "@mui/material";
|
||||
import ItemAppointment from "./ItemAppointment";
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD";
|
||||
import Link from "next/link";
|
||||
|
||||
function AppointmentList({ doctor, loading }) {
|
||||
const itemActive = turns[0];
|
||||
|
||||
const itemActive = turns[0];
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul className="hidden lg:flex w-[38%] flex-col justify-start items-center gap-8">
|
||||
{[turns[0]].map(item => (
|
||||
<ItemAppointment
|
||||
turn={item}
|
||||
key={item.id}
|
||||
doctor={doctor}
|
||||
loading={loading}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className='fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7]
|
||||
border-solid bottom-0 right-0 w-full p-4 flex items-center justify-between'>
|
||||
<p className='text-[#05BA58] text-[11px] font-normal'>اولین نوبت آزاد: {itemActive.first_free_turn}</p>
|
||||
<Link
|
||||
href={`/booking/${itemActive.id}`}
|
||||
>
|
||||
<Button
|
||||
variant='contained'
|
||||
className='!py-2 !px-4 gap-1 !text-[14px] !font-medium'
|
||||
>
|
||||
دریافت نوبت
|
||||
<div className='w-[20px] h-[20px]'>
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
return (
|
||||
<>
|
||||
<ul className="hidden lg:flex w-[38%] flex-col justify-start items-center gap-8">
|
||||
{[turns[0]].map((item) => (
|
||||
<ItemAppointment
|
||||
turn={item}
|
||||
key={item.id}
|
||||
doctor={doctor}
|
||||
loading={loading}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div
|
||||
className="fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7]
|
||||
border-solid bottom-0 right-0 w-full p-4 flex items-center justify-between"
|
||||
>
|
||||
<p className="text-[#05BA58] text-[11px] font-normal">
|
||||
اولین نوبت آزاد: {itemActive.first_free_turn}
|
||||
</p>
|
||||
<Link href={`/booking/${itemActive.id}`}>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!py-2 !px-4 gap-1 !text-[14px] !font-medium"
|
||||
>
|
||||
دریافت نوبت
|
||||
<div className="w-[20px] h-[20px]">
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AppointmentList
|
||||
export default AppointmentList;
|
||||
|
||||
@@ -1,37 +1,36 @@
|
||||
import { Box, Modal } from "@mui/material"
|
||||
import { styleDefault } from "@/mui"
|
||||
import DatePicker from "@/app/component/date/datePicker"
|
||||
import CloseModalD from "@/components/icons/CloseModalD"
|
||||
import DateTime from "@/app/component/date/dateTime"
|
||||
import { Box, Modal } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import DatePicker from "@/app/component/date/datePicker";
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
import DateTime from "@/app/component/date/dateTime";
|
||||
|
||||
function ModalDatePicker({ open, handleClose }) {
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Box sx={styleDefault} className="!py-[24px] !px-[40px]">
|
||||
<div className="flex justify-between items-center">
|
||||
<span></span>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-medium">دریافت نوبت از دکتر مهران امینی</p>
|
||||
<div className="cursor-pointer" onClick={handleClose}>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-start justify-start gap-[16px] mt-[24px]">
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب روز</p>
|
||||
<div className="py-[24px] px-[32px] border border-solid border-[#E9ECEF] rounded-[16px] bg-[#FFF] flex items-center">
|
||||
<DatePicker />
|
||||
<DatePicker />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-[24px]">
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب ساعت</p>
|
||||
<DateTime />
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
)
|
||||
return (
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box sx={styleDefault} className="!py-[24px] !px-[40px]">
|
||||
<div className="flex justify-between items-center">
|
||||
<span></span>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-medium">
|
||||
دریافت نوبت از دکتر مهران امینی
|
||||
</p>
|
||||
<div className="cursor-pointer" onClick={handleClose}>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-start justify-start gap-[16px] mt-[24px]">
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب روز</p>
|
||||
<div className="py-[24px] px-[32px] border border-solid border-[#E9ECEF] rounded-[16px] bg-[#FFF] flex items-center">
|
||||
<DatePicker />
|
||||
<DatePicker />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-[24px]">
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب ساعت</p>
|
||||
<DateTime />
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalDatePicker
|
||||
export default ModalDatePicker;
|
||||
|
||||
@@ -1,50 +1,48 @@
|
||||
'use client';
|
||||
"use client";
|
||||
import { Button } from "@mui/material";
|
||||
import { useState } from "react"
|
||||
import { useState } from "react";
|
||||
|
||||
const listLink = [
|
||||
{ name: 'درباره پزشک', link: 'about-doctor' },
|
||||
{ name: 'موقعیت مکانی ', link: 'location' },
|
||||
{ name: 'نظرات', link: 'comments' },
|
||||
]
|
||||
{ name: "درباره پزشک", link: "about-doctor" },
|
||||
{ name: "موقعیت مکانی ", link: "location" },
|
||||
{ name: "نظرات", link: "comments" },
|
||||
];
|
||||
|
||||
function Link() {
|
||||
const [activeId, setActiveId] = useState(0);
|
||||
|
||||
const [activeId, setActiveId] = useState(0);
|
||||
|
||||
return (
|
||||
<>
|
||||
<span className="block bg-[#EFEFEF] h-px w-full my-[16px] lg:my-0 lg:bg-transparent"></span>
|
||||
<ul className="flex lg:mt-[56px] items-center justify-evenly lg:justify-start mb-[32px]">
|
||||
{listLink.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="flex w-full lg:w-fit relative"
|
||||
>
|
||||
<a
|
||||
href={`#${item.link}`}
|
||||
className="mx-auto"
|
||||
>
|
||||
<Button
|
||||
onClick={() => setActiveId(idx)}
|
||||
className={`!text-[16px] md:!text-[18px] lg:!text-[20px] !text-center !font-bold !p-1
|
||||
${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
|
||||
return (
|
||||
<>
|
||||
<span className="block bg-[#EFEFEF] h-px w-full my-[16px] lg:my-0 lg:bg-transparent"></span>
|
||||
<ul className="flex lg:mt-[56px] items-center justify-evenly lg:justify-start mb-[32px]">
|
||||
{listLink.map((item, idx) => (
|
||||
<li key={idx} className="flex w-full lg:w-fit relative">
|
||||
<a href={`#${item.link}`} className="mx-auto">
|
||||
<Button
|
||||
onClick={() => setActiveId(idx)}
|
||||
className={`!text-[16px] md:!text-[18px] lg:!text-[20px] !text-center !font-bold !p-1
|
||||
${
|
||||
activeId === idx
|
||||
? "!text-[#F17732]"
|
||||
: "!text-[#525252]"
|
||||
}
|
||||
`}
|
||||
variant="text">
|
||||
{item.name}
|
||||
</Button>
|
||||
</a>
|
||||
{listLink.length > idx + 1 && (
|
||||
<span
|
||||
className="block border-transparent border-l border-dotted border-l-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]
|
||||
variant="text"
|
||||
>
|
||||
{item.name}
|
||||
</Button>
|
||||
</a>
|
||||
{listLink.length > idx + 1 && (
|
||||
<span
|
||||
className="block border-transparent border-l border-dotted border-l-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]
|
||||
absolute left-0 lg:relative"
|
||||
></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Link
|
||||
export default Link;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import { styleDefault } from "@/mui";
|
||||
import ShareDI from "@/components/icons/ShareDI";
|
||||
import { Box, Button, Modal } from "@mui/material"
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
|
||||
// Icons
|
||||
import CopyBlueD from "@/components/icons/CopyBlueD";
|
||||
@@ -14,80 +14,80 @@ import TelegramBlueD from "@/components/icons/TelegramBlueD";
|
||||
import LinkedingBlueD from "@/components/icons/LinkedingBlueD";
|
||||
|
||||
const listIcons = [
|
||||
{ name: 'واتساپ', icon: <WhatsappBlueD /> },
|
||||
{ name: 'تلگرام', icon: <TelegramBlueD /> },
|
||||
{ name: 'لینکدین', icon: <LinkedingBlueD /> },
|
||||
{ name: 'کپی لینک', icon: <CopyBlueD /> }
|
||||
]
|
||||
{ name: "واتساپ", icon: <WhatsappBlueD /> },
|
||||
{ name: "تلگرام", icon: <TelegramBlueD /> },
|
||||
{ name: "لینکدین", icon: <LinkedingBlueD /> },
|
||||
{ name: "کپی لینک", icon: <CopyBlueD /> },
|
||||
];
|
||||
|
||||
function Share() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<div className="w-full text-left">
|
||||
<Button
|
||||
className="!gap-1 !border-none lg:!border-[#EFEFEF] !p-2 !rounded-lg !text-[#525252] !text-[14px]"
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
<ShareDI />
|
||||
<p className="hidden lg:flex">اشتراک گذاری</p>
|
||||
</Button>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!pt-[12px] md:!pt-[14px] lg:!py-[16px]
|
||||
return (
|
||||
<div className="w-full text-left">
|
||||
<Button
|
||||
className="!gap-1 !border-none lg:!border-[#EFEFEF] !p-2 !rounded-lg !text-[#525252] !text-[14px]"
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
<ShareDI />
|
||||
<p className="hidden lg:flex">اشتراک گذاری</p>
|
||||
</Button>
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!pt-[12px] md:!pt-[14px] lg:!py-[16px]
|
||||
!px-[12px] sm:!px-[16px] md:!px-[20px] lg:!px-[24px]
|
||||
!pb-[12px] sm:!pb-[16px] lg:!pb-[20px]"
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">اشتراک گذاری</p>
|
||||
<Button
|
||||
className="!min-w-0 !p-1"
|
||||
onClick={handleClose}
|
||||
variant="text"
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] mt-[8px] mb-[8px] sm:mb-[10px] md:mb-[12px] lg:mb-[14px]"></span>
|
||||
<p className="text-[#525252] text-[11px] md:text-[12px] lg:text-[14px] font-normal">شما می توانید این پزشک را با دیگران به اشتراک بگذارید:</p>
|
||||
<ul className="flex items-center mx-[60px] sm:mx-[86px] md:mx-[112px] lg:mx-[140px] justify-center mt-[8px] md:mt-[12px] lg:mt-[16px] gap-[24px] sm:gap-[26px] md:gap-[29px] lg:gap-[32px]">
|
||||
{listIcons.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="flex flex-col justify-center items-center w-fit gap-[2px]"
|
||||
>
|
||||
<Button
|
||||
className="
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
اشتراک گذاری
|
||||
</p>
|
||||
<Button
|
||||
className="!min-w-0 !p-1"
|
||||
onClick={handleClose}
|
||||
variant="text"
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] mt-[8px] mb-[8px] sm:mb-[10px] md:mb-[12px] lg:mb-[14px]"></span>
|
||||
<p className="text-[#525252] text-[11px] md:text-[12px] lg:text-[14px] font-normal">
|
||||
شما می توانید این پزشک را با دیگران به اشتراک بگذارید:
|
||||
</p>
|
||||
<ul className="flex items-center mx-[60px] sm:mx-[86px] md:mx-[112px] lg:mx-[140px] justify-center mt-[8px] md:mt-[12px] lg:mt-[16px] gap-[24px] sm:gap-[26px] md:gap-[29px] lg:gap-[32px]">
|
||||
{listIcons.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="flex flex-col justify-center items-center w-fit gap-[2px]"
|
||||
>
|
||||
<Button
|
||||
className="
|
||||
!p-[0px] !bg-[#EAECFA] !rounded-full !min-w-0 grid place-items-center
|
||||
!w-[24px] sm:!w-[28px] md:!w-[32px] lg:!w-[36px]
|
||||
!h-[24px] sm:!h-[28px] md:!h-[32px] lg:!h-[36px]
|
||||
"
|
||||
variant="text"
|
||||
>
|
||||
<div
|
||||
className="grid place-items-center w-full-icon
|
||||
variant="text"
|
||||
>
|
||||
<div
|
||||
className="grid place-items-center w-full-icon
|
||||
!w-[16px] md:!w-[17px] lg:!w-[18px]
|
||||
!h-[16px] md:!h-[17px] lg:!h-[18px]"
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Share
|
||||
export default Share;
|
||||
|
||||
@@ -1,61 +1,73 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import CustomLoading from "@/app/component/loading/Custom"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import LikeDI from "@/components/icons/LikeDI"
|
||||
import StarDI from "@/components/icons/StarDI"
|
||||
import TickCircle from "@/components/icons/TickCircle"
|
||||
import Image from "next/image"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import LikeDI from "@/components/icons/LikeDI";
|
||||
import StarDI from "@/components/icons/StarDI";
|
||||
import TickCircle from "@/components/icons/TickCircle";
|
||||
import Image from "next/image";
|
||||
|
||||
function Title({ doctor, loading }) {
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
|
||||
<CircularLoading loading={loading} width={100} height={100}>
|
||||
<Image
|
||||
className="
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
|
||||
<CircularLoading loading={loading} width={100} height={100}>
|
||||
<Image
|
||||
className="
|
||||
w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
|
||||
h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
|
||||
"
|
||||
src={doctor.img}
|
||||
alt="img-doctor"
|
||||
height={164}
|
||||
width={164}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
|
||||
<TextLoading loading={loading} width={90} height={20}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{doctor.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
|
||||
</TextLoading>
|
||||
<div className="flex items-center justify-start gap-11">
|
||||
<TextLoading loading={loading} width={60} height={20}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">{doctor.experience} سال تجربه</p>
|
||||
</TextLoading>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="hidden lg:flex">
|
||||
<TickCircle />
|
||||
</div>
|
||||
<TextLoading loading={loading} width={120} height={20}>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width={160} height={25}>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<div className="flex p-1 gap-0.5 items-start justify-center">
|
||||
<StarDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
|
||||
</div>
|
||||
<div className="flex p-1 items-start gap-0.5">
|
||||
<LikeDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
|
||||
</div>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
src={doctor.img}
|
||||
alt="img-doctor"
|
||||
height={164}
|
||||
width={164}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
|
||||
<TextLoading loading={loading} width={90} height={20}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
{doctor.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-medium">
|
||||
تخصص: {doctor.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<div className="flex items-center justify-start gap-11">
|
||||
<TextLoading loading={loading} width={60} height={20}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">
|
||||
{doctor.experience} سال تجربه
|
||||
</p>
|
||||
</TextLoading>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="hidden lg:flex">
|
||||
<TickCircle />
|
||||
</div>
|
||||
<TextLoading loading={loading} width={120} height={20}>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">
|
||||
کد نظام پزشکی: {doctor.medical_system_code}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<CustomLoading loading={loading} width={160} height={25}>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<div className="flex p-1 gap-0.5 items-start justify-center">
|
||||
<StarDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
|
||||
امتیاز: {doctor.point}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex p-1 items-start gap-0.5">
|
||||
<LikeDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
|
||||
{doctor.satisfaction}% رضایت کاربران
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Title
|
||||
export default Title;
|
||||
|
||||
@@ -1,57 +1,63 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@mui/material"
|
||||
import { Button } from "@mui/material";
|
||||
import MultilineLoading from "@/app/component/loading/Multiline";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function AboutDcotor({ doctor, loading }) {
|
||||
const [isMore, setIsMore] = useState(false);
|
||||
|
||||
const [isMore, setIsMore] = useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<a
|
||||
id="about-doctor"
|
||||
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
|
||||
></a>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<MultilineLoading loading={loading} width='full' height={18} line={30}>
|
||||
<p
|
||||
className={`
|
||||
return (
|
||||
<div>
|
||||
<a
|
||||
id="about-doctor"
|
||||
className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
|
||||
></a>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<MultilineLoading loading={loading} width="full" height={18} line={30}>
|
||||
<p
|
||||
className={`
|
||||
text-[#616161] text-[14px] font-normal overflow-hidden relative
|
||||
md:max-h-fit after:absolute after:right-0 after:bottom-0 leading-[28px] sm:leading-[30px] md:leading-[32px] lg:leading-[33px] after:h-[80px]
|
||||
after:shadow-xl after:w-full transition-all duration-500 md:after:!bg-[linear-gradient(transparent,transparent)]
|
||||
${isMore ?
|
||||
'after:bg-transparent max-h-screen' :
|
||||
'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
|
||||
}
|
||||
${
|
||||
isMore
|
||||
? "after:bg-transparent max-h-screen"
|
||||
: "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
|
||||
}
|
||||
`}
|
||||
>{doctor.detail}</p>
|
||||
<Button
|
||||
className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
|
||||
onClick={() => setIsMore(!isMore)}
|
||||
variant="text"
|
||||
>
|
||||
{isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
|
||||
</Button>
|
||||
</MultilineLoading>
|
||||
</div>
|
||||
<div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">تخصص ها</p>
|
||||
<ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4">
|
||||
{doctor.specialties.map((item, idx) => (
|
||||
<li key={idx} className="flex items-center justify-start gap-1">
|
||||
<span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
|
||||
<TextLoading loading={loading} width={70} height={18}>
|
||||
<p className="text-[#616161] text-[16px] font-normal text-nowrap">{item}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
{doctor.detail}
|
||||
</p>
|
||||
<Button
|
||||
className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
|
||||
onClick={() => setIsMore(!isMore)}
|
||||
variant="text"
|
||||
>
|
||||
{isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
|
||||
</Button>
|
||||
</MultilineLoading>
|
||||
</div>
|
||||
<div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
|
||||
تخصص ها
|
||||
</p>
|
||||
<ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4">
|
||||
{doctor.specialties.map((item, idx) => (
|
||||
<li key={idx} className="flex items-center justify-start gap-1">
|
||||
<span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
|
||||
<TextLoading loading={loading} width={70} height={18}>
|
||||
<p className="text-[#616161] text-[16px] font-normal text-nowrap">
|
||||
{item}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutDcotor
|
||||
export default AboutDcotor;
|
||||
|
||||
@@ -1,35 +1,37 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import { numberToArStyle } from "@/helper"
|
||||
import { CircularProgress } from "@mui/material"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import { numberToArStyle } from "@/helper";
|
||||
import { CircularProgress } from "@mui/material";
|
||||
|
||||
function ProgressAll({ doctor, loading }) {
|
||||
return (
|
||||
<div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
|
||||
<CircularLoading loading={loading} width={120} height={120}>
|
||||
<CircularProgress
|
||||
variant="determinate"
|
||||
value={doctor.total_user_satisfaction}
|
||||
sx={{
|
||||
'& .MuiCircularProgress-circle': {
|
||||
stroke: '#05BA58',
|
||||
strokeLinecap: 'round'
|
||||
},
|
||||
'& .MuiCircularProgress-svg': {
|
||||
borderRadius: '50%',
|
||||
boxShadow: 'inset 0 0 0 11px #D7D7D7'
|
||||
}
|
||||
}}
|
||||
className="!w-full !h-full"
|
||||
/>
|
||||
<div
|
||||
className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1"
|
||||
>
|
||||
<p className="text-[#525252] text-[12px] font-normal text-center">مجموع<br />رضایت کاربران</p>
|
||||
<p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
|
||||
</div>
|
||||
</CircularLoading>
|
||||
return (
|
||||
<div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
|
||||
<CircularLoading loading={loading} width={120} height={120}>
|
||||
<CircularProgress
|
||||
variant="determinate"
|
||||
value={doctor.total_user_satisfaction}
|
||||
sx={{
|
||||
"& .MuiCircularProgress-circle": {
|
||||
stroke: "#05BA58",
|
||||
strokeLinecap: "round",
|
||||
},
|
||||
"& .MuiCircularProgress-svg": {
|
||||
borderRadius: "50%",
|
||||
boxShadow: "inset 0 0 0 11px #D7D7D7",
|
||||
},
|
||||
}}
|
||||
className="!w-full !h-full"
|
||||
/>
|
||||
<div className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1">
|
||||
<p className="text-[#525252] text-[12px] font-normal text-center">
|
||||
مجموع
|
||||
<br />
|
||||
رضایت کاربران
|
||||
</p>
|
||||
<p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
|
||||
</div>
|
||||
)
|
||||
</CircularLoading>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProgressAll
|
||||
export default ProgressAll;
|
||||
|
||||
@@ -1,62 +1,73 @@
|
||||
import { Rating } from "@mui/material"
|
||||
import ProgressAll from "./ProgressAll"
|
||||
import StarDI from "@/components/icons/StarDI"
|
||||
import LikeDI from "@/components/icons/LikeDI"
|
||||
import ProgressDetail from "@/app/component/ProfressDetail"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import CustomLoading from "@/app/component/loading/Custom"
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import { Rating } from "@mui/material";
|
||||
import ProgressAll from "./ProgressAll";
|
||||
import StarDI from "@/components/icons/StarDI";
|
||||
import LikeDI from "@/components/icons/LikeDI";
|
||||
import ProgressDetail from "@/app/component/ProfressDetail";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
|
||||
function Chart({ doctor, loading }) {
|
||||
return (
|
||||
<div className='
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF]
|
||||
pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
|
||||
'>
|
||||
<TextLoading loading={loading} width={130} height={20}>
|
||||
<div className='flex items-center justify-start gap-2.5'>
|
||||
<p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">(از مجموع {doctor.comments.length} نظر)</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<div className={`${loading ? 'mt-4 mb-6' : 'mt-0 mb-0'} hidden md:flex`}>
|
||||
<TextLoading loading={loading} width={160} height={20}>
|
||||
<Rating
|
||||
readOnly
|
||||
value={4}
|
||||
size="small"
|
||||
name="read-only"
|
||||
className="!mt-4 !mb-6 !hidden lg:!flex"
|
||||
/>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
|
||||
<CustomLoading loading={loading} width={130} height={30}>
|
||||
<div className="flex p-1 gap-0.5 items-start justify-center">
|
||||
<StarDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
|
||||
</div>
|
||||
<div className="flex p-1 items-start gap-0.5">
|
||||
<LikeDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-[50px]">
|
||||
<ul className={`flex w-full flex-col items-start justify-start gap-1.5 ${loading ? 'lg:w-full' : 'lg:w-fit'}`}>
|
||||
{doctor.progress_detail.map((item, idx) => (
|
||||
<TextLoading width='full' height={20} loading={loading}>
|
||||
<ProgressDetail
|
||||
data={item}
|
||||
key={idx}
|
||||
/>
|
||||
</TextLoading>
|
||||
))}
|
||||
</ul>
|
||||
<ProgressAll doctor={doctor} loading={loading} />
|
||||
</div>
|
||||
"
|
||||
>
|
||||
<TextLoading loading={loading} width={130} height={20}>
|
||||
<div className="flex items-center justify-start gap-2.5">
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
امتیاز کلی کاربران: {doctor.overall_score} از 5
|
||||
</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
(از مجموع {doctor.comments.length} نظر)
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
</TextLoading>
|
||||
<div className={`${loading ? "mt-4 mb-6" : "mt-0 mb-0"} hidden md:flex`}>
|
||||
<TextLoading loading={loading} width={160} height={20}>
|
||||
<Rating
|
||||
readOnly
|
||||
value={4}
|
||||
size="small"
|
||||
name="read-only"
|
||||
className="!mt-4 !mb-6 !hidden lg:!flex"
|
||||
/>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
|
||||
<CustomLoading loading={loading} width={130} height={30}>
|
||||
<div className="flex p-1 gap-0.5 items-start justify-center">
|
||||
<StarDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
|
||||
امتیاز: {doctor.point}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex p-1 items-start gap-0.5">
|
||||
<LikeDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
|
||||
{doctor.satisfaction}% رضایت کاربران
|
||||
</p>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-[50px]">
|
||||
<ul
|
||||
className={`flex w-full flex-col items-start justify-start gap-1.5 ${
|
||||
loading ? "lg:w-full" : "lg:w-fit"
|
||||
}`}
|
||||
>
|
||||
{doctor.progress_detail.map((item, idx) => (
|
||||
<TextLoading width="full" height={20} loading={loading}>
|
||||
<ProgressDetail data={item} key={idx} />
|
||||
</TextLoading>
|
||||
))}
|
||||
</ul>
|
||||
<ProgressAll doctor={doctor} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chart
|
||||
export default Chart;
|
||||
|
||||
@@ -1,23 +1,27 @@
|
||||
import Chart from './chart'
|
||||
import Comment from '@/app/component/comment'
|
||||
import ModalAnswer from './modal/ModalAnswer'
|
||||
import Chart from "./chart";
|
||||
import Comment from "@/app/component/comment";
|
||||
import ModalAnswer from "./modal/ModalAnswer";
|
||||
|
||||
function Comments({ doctor, loading }) {
|
||||
return (
|
||||
<div className='mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]'>
|
||||
<a
|
||||
id="comments"
|
||||
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
|
||||
></a>
|
||||
<p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">نظرات کاربران </p>
|
||||
<div className='mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[32px] flex flex-col md:flex-row gap-y-[20px] items-start md:items-center justify-start'>
|
||||
<p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>
|
||||
<ModalAnswer doctor={doctor} />
|
||||
</div>
|
||||
<Chart doctor={doctor} loading={loading} />
|
||||
<Comment data={doctor} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]">
|
||||
<a
|
||||
id="comments"
|
||||
className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
|
||||
></a>
|
||||
<p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
نظرات کاربران{" "}
|
||||
</p>
|
||||
<div className="mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[32px] flex flex-col md:flex-row gap-y-[20px] items-start md:items-center justify-start">
|
||||
<p className="text-[#616161] text-[16px] font-normal">
|
||||
شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:
|
||||
</p>
|
||||
<ModalAnswer doctor={doctor} />
|
||||
</div>
|
||||
<Chart doctor={doctor} loading={loading} />
|
||||
<Comment data={doctor} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Comments
|
||||
export default Comments;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { styleDefault } from "@/mui";
|
||||
@@ -10,77 +10,69 @@ import ProgressChange from "@/app/component/ProgressChange";
|
||||
import Link from "next/link";
|
||||
|
||||
function ModalAnswer({ doctor }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant='outlined'
|
||||
onClick={handleOpen}
|
||||
className='!py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px]
|
||||
lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit'
|
||||
>ثبت نظر</Button>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px] !rounded-none md:!rounded-lg"
|
||||
>
|
||||
<div
|
||||
className="w-full flex justify-end cursor-pointer"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
<p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
|
||||
<Rating
|
||||
className="!my-[24px]"
|
||||
sx={{
|
||||
'& .MuiSvgIcon-root': {
|
||||
width: '12px',
|
||||
height: '12px'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
|
||||
{doctor.progress_detail.map((item, idx) => (
|
||||
<ProgressChange
|
||||
data={item}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-[16px] justify-center items-start mt-[24px]">
|
||||
<p className='text-[#495057] text-[16px] font-bold'>متن نظر</p>
|
||||
<Field
|
||||
type='number'
|
||||
multiline={true}
|
||||
title='نظر خود را بنویسید...'
|
||||
/>
|
||||
<Link
|
||||
href={`/booking/${doctor.id}`}
|
||||
className="!mr-auto"
|
||||
>
|
||||
<Button
|
||||
variant='contained'
|
||||
className='!py-2.5 !px-4 gap-1 !text-[14px] !font-medium !mt-[32px]'
|
||||
>
|
||||
دریافت نوبت
|
||||
<div className='w-[20px] h-[20px]'>
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleOpen}
|
||||
className="!py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px]
|
||||
lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit"
|
||||
>
|
||||
ثبت نظر
|
||||
</Button>
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px] !rounded-none md:!rounded-lg"
|
||||
>
|
||||
<div
|
||||
className="w-full flex justify-end cursor-pointer"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
<p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
|
||||
<Rating
|
||||
className="!my-[24px]"
|
||||
sx={{
|
||||
"& .MuiSvgIcon-root": {
|
||||
width: "12px",
|
||||
height: "12px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
|
||||
{doctor.progress_detail.map((item, idx) => (
|
||||
<ProgressChange data={item} key={idx} />
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-[16px] justify-center items-start mt-[24px]">
|
||||
<p className="text-[#495057] text-[16px] font-bold">متن نظر</p>
|
||||
<Field
|
||||
type="number"
|
||||
multiline={true}
|
||||
title="نظر خود را بنویسید..."
|
||||
/>
|
||||
<Link href={`/booking/${doctor.id}`} className="!mr-auto">
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!py-2.5 !px-4 gap-1 !text-[14px] !font-medium !mt-[32px]"
|
||||
>
|
||||
دریافت نوبت
|
||||
<div className="w-[20px] h-[20px]">
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalAnswer
|
||||
export default ModalAnswer;
|
||||
|
||||
@@ -1,101 +1,101 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@mui/material';
|
||||
import ArrowBottomGrayD from '@/components/icons/ArrowBottomGrayD';
|
||||
import ModalOpenLocation from '@/app/component/openLocation';
|
||||
import RoutingWhiteC from '@/components/icons/RoutingWhiteC';
|
||||
import RoutingC from '@/components/icons/RoutingC';
|
||||
import { useState } from "react";
|
||||
import { Button } from "@mui/material";
|
||||
import ArrowBottomGrayD from "@/components/icons/ArrowBottomGrayD";
|
||||
import ModalOpenLocation from "@/app/component/openLocation";
|
||||
import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
|
||||
import RoutingC from "@/components/icons/RoutingC";
|
||||
|
||||
function Item({ data }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(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={`
|
||||
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'}
|
||||
${isOpen ? "rotate-180" : "rotate-0"}
|
||||
`}
|
||||
>
|
||||
<ArrowBottomGrayD />
|
||||
</div>
|
||||
</Button>
|
||||
<div
|
||||
className={`
|
||||
>
|
||||
<ArrowBottomGrayD />
|
||||
</div>
|
||||
</Button>
|
||||
<div
|
||||
className={`
|
||||
overflow-hidden transition-all duration-500
|
||||
${isOpen ?
|
||||
'max-h-screen ' :
|
||||
'max-h-0'}
|
||||
${isOpen ? "max-h-screen " : "max-h-0"}
|
||||
`}
|
||||
>
|
||||
<div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
|
||||
<p className="text-[#525252] text-[16px] font-normal">
|
||||
آدرس: {data.address}
|
||||
</p>
|
||||
<p className="text-[#525252] text-[16px] font-normal">
|
||||
تلفن: {data.phone}
|
||||
</p>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<p className="text-[#525252] text-[16px] font-normal">
|
||||
روزهای کاری: {data.working_days}
|
||||
</p>
|
||||
<ModalOpenLocation
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClose={handleClose}
|
||||
>
|
||||
<div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
|
||||
<p className="text-[#525252] text-[16px] font-normal">آدرس: {data.address}</p>
|
||||
<p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
|
||||
<div className='flex w-full items-center justify-between'>
|
||||
<p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
|
||||
<ModalOpenLocation
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClose={handleClose}
|
||||
>
|
||||
<Button
|
||||
className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
<RoutingC />
|
||||
مسیریابی
|
||||
</Button>
|
||||
</ModalOpenLocation>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]"
|
||||
>
|
||||
<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='
|
||||
<Button
|
||||
className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
<RoutingC />
|
||||
مسیریابی
|
||||
</Button>
|
||||
</ModalOpenLocation>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
|
||||
<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 rounded-lg mt-4 h-full
|
||||
'
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
allowFullScreen=""
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
<ModalOpenLocation
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClose={handleClose}
|
||||
>
|
||||
<Button
|
||||
className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3
|
||||
"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
allowFullScreen=""
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
<ModalOpenLocation
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClose={handleClose}
|
||||
>
|
||||
<Button
|
||||
className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3
|
||||
!bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)] !gap-[8px] !text-[#FAFAFA] !text-[14px] !font-medium"
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<RoutingWhiteC />
|
||||
مسیریابی
|
||||
</Button>
|
||||
</ModalOpenLocation>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<RoutingWhiteC />
|
||||
مسیریابی
|
||||
</Button>
|
||||
</ModalOpenLocation>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Item
|
||||
export default Item;
|
||||
|
||||
@@ -1,29 +1,26 @@
|
||||
import CustomLoading from "@/app/component/loading/Custom"
|
||||
import Item from "./Item"
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import Item from "./Item";
|
||||
|
||||
function Locations({ doctor, loading }) {
|
||||
return (
|
||||
<div>
|
||||
<p
|
||||
className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold"
|
||||
>موقعیت مکانی </p>
|
||||
<ul className="flex w-full mt-[24px] flex-col justify-center items-start">
|
||||
{doctor.locations.map((item, idx) => (
|
||||
<CustomLoading loading={loading} width='full' height={40}>
|
||||
<li className="w-full">
|
||||
<Item
|
||||
key={idx}
|
||||
data={item}
|
||||
/>
|
||||
{doctor.locations.length > idx + 1 && (
|
||||
<span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
)}
|
||||
</li>
|
||||
</CustomLoading>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
موقعیت مکانی{" "}
|
||||
</p>
|
||||
<ul className="flex w-full mt-[24px] flex-col justify-center items-start">
|
||||
{doctor.locations.map((item, idx) => (
|
||||
<CustomLoading loading={loading} width="full" height={40}>
|
||||
<li className="w-full">
|
||||
<Item key={idx} data={item} />
|
||||
{doctor.locations.length > idx + 1 && (
|
||||
<span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
)}
|
||||
</li>
|
||||
</CustomLoading>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Locations
|
||||
export default Locations;
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import Link from "./Link"
|
||||
import Share from "./Share"
|
||||
import Title from "./Title"
|
||||
import AboutDcotor from "./cards/AboutDcotor"
|
||||
import Comments from "./cards/comments"
|
||||
import Locations from "./cards/locations"
|
||||
import Link from "./Link";
|
||||
import Share from "./Share";
|
||||
import Title from "./Title";
|
||||
import AboutDcotor from "./cards/AboutDcotor";
|
||||
import Comments from "./cards/comments";
|
||||
import Locations from "./cards/locations";
|
||||
|
||||
function DetailDoctor({ doctor, loading }) {
|
||||
return (
|
||||
<div className="w-full lg:w-[59%]">
|
||||
<div className="hidden lg:flex">
|
||||
<Share />
|
||||
</div>
|
||||
<Title doctor={doctor} loading={loading} />
|
||||
<Link />
|
||||
<AboutDcotor loading={loading} doctor={doctor} />
|
||||
<Locations loading={loading} doctor={doctor} />
|
||||
<Comments loading={loading} doctor={doctor} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full lg:w-[59%]">
|
||||
<div className="hidden lg:flex">
|
||||
<Share />
|
||||
</div>
|
||||
<Title doctor={doctor} loading={loading} />
|
||||
<Link />
|
||||
<AboutDcotor loading={loading} doctor={doctor} />
|
||||
<Locations loading={loading} doctor={doctor} />
|
||||
<Comments loading={loading} doctor={doctor} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailDoctor
|
||||
export default DetailDoctor;
|
||||
|
||||
+30
-29
@@ -1,40 +1,41 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import AppointmentList from "./appointmentList"
|
||||
import DetailDoctor from "./detailDoctor"
|
||||
import AppointmentList from "./appointmentList";
|
||||
import DetailDoctor from "./detailDoctor";
|
||||
import Share from "./detailDoctor/Share";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
|
||||
function DoctorPage({ doctor }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
|
||||
<div className="flex items-center justify-between">
|
||||
<CustomLoading loading={loading} width={180} height={25}>
|
||||
<div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
|
||||
<p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
|
||||
<p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
<div className="flex lg:hidden">
|
||||
<Share />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start justify-center gap-6 mt-[30px]">
|
||||
<DetailDoctor doctor={doctor} loading={loading} />
|
||||
<AppointmentList doctor={doctor} loading={loading} />
|
||||
</div>
|
||||
return (
|
||||
<div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
|
||||
<div className="flex items-center justify-between">
|
||||
<CustomLoading loading={loading} width={180} height={25}>
|
||||
<div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
|
||||
<p className="text-[#9B9B9B] text-nowrap">
|
||||
متخصص {doctor.expertise} {" >"}
|
||||
</p>
|
||||
<p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
<div className="flex lg:hidden">
|
||||
<Share />
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
<div className="flex items-start justify-center gap-6 mt-[30px]">
|
||||
<DetailDoctor doctor={doctor} loading={loading} />
|
||||
<AppointmentList doctor={doctor} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DoctorPage;
|
||||
export default DoctorPage;
|
||||
|
||||
Reference in New Issue
Block a user