add prettier formatter to all file
This commit is contained in:
Ehsan
+16
-14
@@ -1,18 +1,20 @@
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
function Head() {
|
||||
return (
|
||||
<div className='bg-[#5559C2] rounded-none md:rounded-lg w-full py-[24px] flex flex-col items-center justify-center gap-[13px] md:gap-[16px]'>
|
||||
<Image
|
||||
src='/assets/images/logo-2.png'
|
||||
height={46}
|
||||
width={46}
|
||||
alt='logo'
|
||||
/>
|
||||
<p className="text-[#FAFAFA] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-bold">درباره نوبت ۷۲۴</p>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="bg-[#5559C2] rounded-none md:rounded-lg w-full py-[24px] flex flex-col items-center justify-center gap-[13px] md:gap-[16px]">
|
||||
<Image
|
||||
src="/assets/images/logo-2.png"
|
||||
height={46}
|
||||
width={46}
|
||||
alt="logo"
|
||||
/>
|
||||
<p className="text-[#FAFAFA] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-bold">
|
||||
درباره نوبت ۷۲۴
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,40 +1,37 @@
|
||||
import AnimationTextHead from '@/app/component/AnimationTextHead';
|
||||
import UnderlineLG from '../icons/UnderlineLG';
|
||||
import TickOrangeA from '../icons/TickOrangeA';
|
||||
import AnimationTextHead from "@/app/component/AnimationTextHead";
|
||||
import UnderlineLG from "../icons/UnderlineLG";
|
||||
import TickOrangeA from "../icons/TickOrangeA";
|
||||
|
||||
const ourServices = [
|
||||
'جستجوی سریع پزشک ',
|
||||
'جستجوی کلینیک و مراکز درمانی',
|
||||
'نوبت گیری راحت و آسان',
|
||||
'دشبورد تخصصی بیمار',
|
||||
'دشبورد تخصصی پزشک',
|
||||
'نوبت گیری راحت و آسان'
|
||||
]
|
||||
"جستجوی سریع پزشک ",
|
||||
"جستجوی کلینیک و مراکز درمانی",
|
||||
"نوبت گیری راحت و آسان",
|
||||
"دشبورد تخصصی بیمار",
|
||||
"دشبورد تخصصی پزشک",
|
||||
"نوبت گیری راحت و آسان",
|
||||
];
|
||||
|
||||
function Services() {
|
||||
return (
|
||||
<div className='mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]'>
|
||||
<div className='flex justify-center'>
|
||||
<AnimationTextHead name='zoom-in-up' text='خدمات ما'>
|
||||
<UnderlineLG />
|
||||
</AnimationTextHead>
|
||||
</div>
|
||||
<ul
|
||||
className='mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px]
|
||||
gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3'
|
||||
>
|
||||
{ourServices.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className='flex items-start justify-start gap-[8px]'
|
||||
>
|
||||
<TickOrangeA />
|
||||
<p className='text-[#525252] text-[16px] font-medium'>{item}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]">
|
||||
<div className="flex justify-center">
|
||||
<AnimationTextHead name="zoom-in-up" text="خدمات ما">
|
||||
<UnderlineLG />
|
||||
</AnimationTextHead>
|
||||
</div>
|
||||
<ul
|
||||
className="mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px]
|
||||
gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3"
|
||||
>
|
||||
{ourServices.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start justify-start gap-[8px]">
|
||||
<TickOrangeA />
|
||||
<p className="text-[#525252] text-[16px] font-medium">{item}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Services
|
||||
export default Services;
|
||||
|
||||
+23
-12
@@ -2,23 +2,34 @@ import Head from "./Head";
|
||||
import Services from "./Services";
|
||||
|
||||
function AboutUsPage() {
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
pt-[24px] sm:pt-[56px] md:pt-[88px] lg:pt-[120px] mt-[56px]
|
||||
px-0 md:px-[80px] lg:px-[108px]
|
||||
"
|
||||
>
|
||||
<Head />
|
||||
<p
|
||||
className="
|
||||
>
|
||||
<Head />
|
||||
<p
|
||||
className="
|
||||
text-[#525252] text-[16px] font-normal mt-[32px] leading-[24px] md:leading-[32px] lg:leading-[40px]
|
||||
px-[16px] sm:px-[52px] md:px-[15%] text-justify md:text-center
|
||||
"
|
||||
>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
|
||||
<Services />
|
||||
</div>
|
||||
)
|
||||
>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
|
||||
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
|
||||
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
|
||||
متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه
|
||||
درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با
|
||||
نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان
|
||||
خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید
|
||||
داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان
|
||||
رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات
|
||||
پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
|
||||
</p>
|
||||
<Services />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutUsPage;
|
||||
export default AboutUsPage;
|
||||
|
||||
@@ -1,47 +1,47 @@
|
||||
import CustomLoading from '@/app/component/loading/Custom'
|
||||
import MultilineLoading from '@/app/component/loading/Multiline'
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import MultilineLoading from "@/app/component/loading/Multiline";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
function Caption({ data, loading }) {
|
||||
return (
|
||||
<>
|
||||
<CustomLoading loading={loading} width='full' height={500}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden w-full"
|
||||
src={data.cover_first}
|
||||
alt="cover-blog"
|
||||
height={570}
|
||||
width={808}
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? 'my-4' : ''}>
|
||||
<MultilineLoading loading={loading} width='full' height={18} line={20}>
|
||||
<div
|
||||
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
/>
|
||||
</MultilineLoading>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width='full' height={500}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden w-full"
|
||||
src={data.cover_second}
|
||||
alt="cover-blog"
|
||||
height={570}
|
||||
width={808}
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? 'my-4' : ''}>
|
||||
<MultilineLoading loading={loading} width='full' height={18} line={20}>
|
||||
<div
|
||||
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
/>
|
||||
</MultilineLoading>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<CustomLoading loading={loading} width="full" height={500}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden w-full"
|
||||
src={data.cover_first}
|
||||
alt="cover-blog"
|
||||
height={570}
|
||||
width={808}
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? "my-4" : ""}>
|
||||
<MultilineLoading loading={loading} width="full" height={18} line={20}>
|
||||
<div
|
||||
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
/>
|
||||
</MultilineLoading>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width="full" height={500}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden w-full"
|
||||
src={data.cover_second}
|
||||
alt="cover-blog"
|
||||
height={570}
|
||||
width={808}
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? "my-4" : ""}>
|
||||
<MultilineLoading loading={loading} width="full" height={18} line={20}>
|
||||
<div
|
||||
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
/>
|
||||
</MultilineLoading>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Caption
|
||||
export default Caption;
|
||||
|
||||
@@ -1,30 +1,26 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import LinkedinB from "@/components/icons/LinkedinB"
|
||||
import TelegramB from "@/components/icons/TelegramB"
|
||||
import WhatsappB from "@/components/icons/WhatsappB"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import LinkedinB from "@/components/icons/LinkedinB";
|
||||
import TelegramB from "@/components/icons/TelegramB";
|
||||
import WhatsappB from "@/components/icons/WhatsappB";
|
||||
|
||||
const socials = [
|
||||
<WhatsappB />,
|
||||
<TelegramB />,
|
||||
<LinkedinB />
|
||||
]
|
||||
const socials = [<WhatsappB />, <TelegramB />, <LinkedinB />];
|
||||
|
||||
function SocialMedia({ loading }) {
|
||||
return (
|
||||
<ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
|
||||
{socials.map((item, idx) => (
|
||||
<CircularLoading width={36} height={36} loading={loading}>
|
||||
<li
|
||||
key={idx}
|
||||
className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
</CircularLoading>
|
||||
))}
|
||||
<span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
|
||||
{socials.map((item, idx) => (
|
||||
<CircularLoading width={36} height={36} loading={loading}>
|
||||
<li
|
||||
key={idx}
|
||||
className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
</CircularLoading>
|
||||
))}
|
||||
<span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default SocialMedia
|
||||
export default SocialMedia;
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
import { Button } from '@mui/material'
|
||||
import React from 'react'
|
||||
import { Button } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
function AddComment() {
|
||||
return (
|
||||
<div className='flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]'>
|
||||
<p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را به اشتراک بگذارید:</p>
|
||||
<Button
|
||||
variant='outlined'
|
||||
className='!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px]
|
||||
!px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]'
|
||||
>
|
||||
ثبت نظر
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]">
|
||||
<p className="text-[#616161] text-[16px] font-normal">
|
||||
شما هم نظر خود را به اشتراک بگذارید:
|
||||
</p>
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px]
|
||||
!px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]"
|
||||
>
|
||||
ثبت نظر
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddComment
|
||||
export default AddComment;
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import AnimationTextHead from '@/app/component/AnimationTextHead'
|
||||
import Comment from '@/app/component/comment'
|
||||
import Underline from '@/components/icons/Underline'
|
||||
import React from 'react'
|
||||
import AddComment from './AddComment'
|
||||
import AnimationTextHead from "@/app/component/AnimationTextHead";
|
||||
import Comment from "@/app/component/comment";
|
||||
import Underline from "@/components/icons/Underline";
|
||||
import React from "react";
|
||||
import AddComment from "./AddComment";
|
||||
|
||||
function CommentUser({ data, loading }) {
|
||||
return (
|
||||
<div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
|
||||
<AnimationTextHead name='zoom-in-up' text='نظرات'>
|
||||
<Underline />
|
||||
</AnimationTextHead>
|
||||
<AddComment />
|
||||
<Comment data={data} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
|
||||
<AnimationTextHead name="zoom-in-up" text="نظرات">
|
||||
<Underline />
|
||||
</AnimationTextHead>
|
||||
<AddComment />
|
||||
<Comment data={data} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CommentUser
|
||||
export default CommentUser;
|
||||
|
||||
@@ -3,13 +3,13 @@ import SocialMedia from "./SocialMedia";
|
||||
import CommentUser from "./commentUser";
|
||||
|
||||
function Detail({ data, loading }) {
|
||||
return (
|
||||
<div className="w-full lg:w-[68%]">
|
||||
<Caption data={data} loading={loading} />
|
||||
<SocialMedia loading={loading} />
|
||||
<CommentUser data={data} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full lg:w-[68%]">
|
||||
<Caption data={data} loading={loading} />
|
||||
<SocialMedia loading={loading} />
|
||||
<CommentUser data={data} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Detail
|
||||
export default Detail;
|
||||
|
||||
@@ -1,36 +1,56 @@
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function Head({ data, loading }) {
|
||||
return (
|
||||
<div>
|
||||
<TextLoading width={200} height={18} loading={loading}>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
|
||||
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">پوست و مو {'>'}</p>
|
||||
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<div className={loading ? 'mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]' : ''}>
|
||||
<TextLoading width={250} height={22} loading={loading}>
|
||||
<p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">تاریخ انتشار:</p>
|
||||
<TextLoading width={55} height={22} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">زمان مطالعه:</p>
|
||||
<TextLoading width={55} height={22} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div>
|
||||
<TextLoading width={200} height={18} loading={loading}>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
||||
بلاگ {">"}
|
||||
</p>
|
||||
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
||||
پوست و مو {">"}
|
||||
</p>
|
||||
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
||||
روش های خانگی محافظت از پوست در تابستان
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
</TextLoading>
|
||||
<div
|
||||
className={
|
||||
loading ? "mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" : ""
|
||||
}
|
||||
>
|
||||
<TextLoading width={250} height={22} loading={loading}>
|
||||
<p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
|
||||
روش های خانگی محافظت از پوست در تابستان
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
|
||||
تاریخ انتشار:
|
||||
</p>
|
||||
<TextLoading width={55} height={22} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
|
||||
{data.date_of_release}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
|
||||
زمان مطالعه:
|
||||
</p>
|
||||
<TextLoading width={55} height={22} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
|
||||
{data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
+17
-18
@@ -1,4 +1,4 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Detail from "./detail";
|
||||
@@ -6,24 +6,23 @@ import Head from "./head";
|
||||
import RelatedContent from "./relatedContent";
|
||||
|
||||
function BlogPage({ article, articles }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
|
||||
<Head data={article} loading={loading} />
|
||||
<div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
|
||||
<Detail data={article} loading={loading} />
|
||||
<RelatedContent data={articles} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
|
||||
<Head data={article} loading={loading} />
|
||||
<div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
|
||||
<Detail data={article} loading={loading} />
|
||||
<RelatedContent data={articles} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogPage
|
||||
export default BlogPage;
|
||||
|
||||
@@ -5,42 +5,42 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function Item({ data, idx, loading }) {
|
||||
return (
|
||||
<li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
|
||||
<CustomLoading width={80} height={72} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<Image
|
||||
className="
|
||||
return (
|
||||
<li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
|
||||
<CustomLoading width={80} height={72} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<Image
|
||||
className="
|
||||
min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px]
|
||||
min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px]
|
||||
rounded-[8px] overflow-hidden object-cover
|
||||
"
|
||||
src={data.src}
|
||||
alt="article"
|
||||
height={88}
|
||||
width={97}
|
||||
/>
|
||||
</Link>
|
||||
</CustomLoading>
|
||||
<div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
|
||||
<TextLoading width={150} height={18} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<p
|
||||
className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
|
||||
>{data.title}</p>
|
||||
</Link>
|
||||
</TextLoading>
|
||||
<TextLoading width={110} height={18} loading={loading}>
|
||||
<p
|
||||
className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
|
||||
>تاریخ انتشار: {data.date_of_release}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
{data.id > idx + 1 && (
|
||||
<span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
src={data.src}
|
||||
alt="article"
|
||||
height={88}
|
||||
width={97}
|
||||
/>
|
||||
</Link>
|
||||
</CustomLoading>
|
||||
<div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
|
||||
<TextLoading width={150} height={18} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
|
||||
{data.title}
|
||||
</p>
|
||||
</Link>
|
||||
</TextLoading>
|
||||
<TextLoading width={110} height={18} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[12px] text-nowrap font-normal">
|
||||
تاریخ انتشار: {data.date_of_release}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
{data.id > idx + 1 && (
|
||||
<span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Item
|
||||
export default Item;
|
||||
|
||||
@@ -1,26 +1,21 @@
|
||||
import AnimationTextHead from '@/app/component/AnimationTextHead'
|
||||
import UnderlineLG from '@/components/icons/UnderlineLG'
|
||||
import React from 'react'
|
||||
import Item from './Item'
|
||||
import AnimationTextHead from "@/app/component/AnimationTextHead";
|
||||
import UnderlineLG from "@/components/icons/UnderlineLG";
|
||||
import React from "react";
|
||||
import Item from "./Item";
|
||||
|
||||
function RelatedContent({ data, loading }) {
|
||||
return (
|
||||
<div className='p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
|
||||
<AnimationTextHead name='fade-up' text='مطالب مرتبط'>
|
||||
<div className="p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
|
||||
<AnimationTextHead name="fade-up" text="مطالب مرتبط">
|
||||
<UnderlineLG />
|
||||
</AnimationTextHead>
|
||||
<ul className='flex w-full lg:w-fit flex-col justify-start items-start'>
|
||||
<ul className="flex w-full lg:w-fit flex-col justify-start items-start">
|
||||
{data.map((item, idx) => (
|
||||
<Item
|
||||
idx={idx}
|
||||
data={item}
|
||||
key={item.id}
|
||||
loading={loading}
|
||||
/>
|
||||
<Item idx={idx} data={item} key={item.id} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default RelatedContent
|
||||
export default RelatedContent;
|
||||
|
||||
+104
-72
@@ -1,77 +1,109 @@
|
||||
import CustomLoading from '@/app/component/loading/Custom'
|
||||
import TextLoading from '@/app/component/loading/Text'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function Head({ loading }) {
|
||||
return (
|
||||
<div className='flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
|
||||
<Link href='#' className='w-full lg:w-1/2 cover-head-blogs'>
|
||||
<CustomLoading loading={loading} width='full' height={400}>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-1.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
<div className='w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
|
||||
<div className='w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
|
||||
<Link href='#' className='w-full cover-head-blogs'>
|
||||
<CustomLoading loading={loading} width='full' height={180}>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-2.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href='#' className='w-full cover-head-blogs'>
|
||||
<CustomLoading loading={loading} width='full' height={180}>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-3.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href='#' className='w-full cover-head-blogs'>
|
||||
<CustomLoading loading={loading} width='full' height={180}>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-4.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
|
||||
<Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
|
||||
<CustomLoading loading={loading} width="full" height={400}>
|
||||
<Image
|
||||
src="/assets/images/head-blogs-1.png"
|
||||
width={600}
|
||||
height={424}
|
||||
alt="head blog"
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div
|
||||
className={
|
||||
loading
|
||||
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
|
||||
روش های خانگی محافظت از پوست در تابستان
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
)
|
||||
</Link>
|
||||
<div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
|
||||
<div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
|
||||
<Link href="#" className="w-full cover-head-blogs">
|
||||
<CustomLoading loading={loading} width="full" height={180}>
|
||||
<Image
|
||||
src="/assets/images/head-blogs-2.png"
|
||||
width={600}
|
||||
height={424}
|
||||
alt="head blog"
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div
|
||||
className={
|
||||
loading
|
||||
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
|
||||
فواید نوشیدن آب برای سلامتی
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="w-full cover-head-blogs">
|
||||
<CustomLoading loading={loading} width="full" height={180}>
|
||||
<Image
|
||||
src="/assets/images/head-blogs-3.png"
|
||||
width={600}
|
||||
height={424}
|
||||
alt="head blog"
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div
|
||||
className={
|
||||
loading
|
||||
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
|
||||
راهکارهای ساده برای درمان سر درد
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href="#" className="w-full cover-head-blogs">
|
||||
<CustomLoading loading={loading} width="full" height={180}>
|
||||
<Image
|
||||
src="/assets/images/head-blogs-4.png"
|
||||
width={600}
|
||||
height={424}
|
||||
alt="head blog"
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div
|
||||
className={
|
||||
loading
|
||||
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
|
||||
تغذیه مناسب برای کاهش فشار خون
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
+15
-16
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -7,22 +7,21 @@ import Title from "./title";
|
||||
import LatestArticles from "./latestArticles";
|
||||
|
||||
function BlogsPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
|
||||
<Title />
|
||||
<Head loading={loading} />
|
||||
<LatestArticles loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
|
||||
<Title />
|
||||
<Head loading={loading} />
|
||||
<LatestArticles loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogsPage
|
||||
export default BlogsPage;
|
||||
|
||||
@@ -1,41 +1,47 @@
|
||||
import CustomLoading from '@/app/component/loading/Custom';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link';
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function Article({ data, loading }) {
|
||||
return (
|
||||
<li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
|
||||
<CustomLoading width='full' height={200} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<Image
|
||||
className='w-full'
|
||||
alt="article-img"
|
||||
src={data.src}
|
||||
height={217}
|
||||
width={392}
|
||||
/>
|
||||
</Link>
|
||||
</CustomLoading>
|
||||
<div className='p-[12px] md:p-[14px] lg:p-[16px]'>
|
||||
<div className={loading ? 'mb-[12px] md:mb-[14px] lg:mb-[16px]' : ''}>
|
||||
<TextLoading width={150} height={18} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
|
||||
</Link>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className='flex items-center justify-start gap-[35px]'>
|
||||
<TextLoading width={100} height={18} loading={loading}>
|
||||
<p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
|
||||
</TextLoading>
|
||||
<TextLoading width={110} height={18} loading={loading}>
|
||||
<p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
return (
|
||||
<li className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]">
|
||||
<CustomLoading width="full" height={200} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<Image
|
||||
className="w-full"
|
||||
alt="article-img"
|
||||
src={data.src}
|
||||
height={217}
|
||||
width={392}
|
||||
/>
|
||||
</Link>
|
||||
</CustomLoading>
|
||||
<div className="p-[12px] md:p-[14px] lg:p-[16px]">
|
||||
<div className={loading ? "mb-[12px] md:mb-[14px] lg:mb-[16px]" : ""}>
|
||||
<TextLoading width={150} height={18} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<p className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
|
||||
{data.title}
|
||||
</p>
|
||||
</Link>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-[35px]">
|
||||
<TextLoading width={100} height={18} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[14px] font-medium">
|
||||
تاریخ انتشار: {data.date_of_release}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading width={110} height={18} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[14px] font-medium">
|
||||
زمان مطالعه: {data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Article;
|
||||
export default Article;
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
import articles from '@/data/articles.json';
|
||||
import articles from "@/data/articles.json";
|
||||
import Article from "./Article";
|
||||
import Pagination from '@/app/component/Pagination';
|
||||
import Pagination from "@/app/component/Pagination";
|
||||
|
||||
function LatestArticles({ loading }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
{articles.map(item => (
|
||||
<Article
|
||||
data={item}
|
||||
key={item.id}
|
||||
loading={loading}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className='mt-[56px] flex justify-center'>
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
|
||||
جدیدترین مقاله ها
|
||||
</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
{articles.map((item) => (
|
||||
<Article data={item} key={item.id} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-[56px] flex justify-center">
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LatestArticles
|
||||
export default LatestArticles;
|
||||
|
||||
@@ -1,22 +1,25 @@
|
||||
import { Button } from "@mui/material"
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
|
||||
|
||||
return (
|
||||
<li>
|
||||
<Button
|
||||
className={`
|
||||
return (
|
||||
<li>
|
||||
<Button
|
||||
className={`
|
||||
!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px
|
||||
${activeBtn === idx ? '!bg-[#F17732] !text-[#FAFAFA]' : '!bg-[#F5F5F5] !text-[#3B3B3B]'}
|
||||
${
|
||||
activeBtn === idx
|
||||
? "!bg-[#F17732] !text-[#FAFAFA]"
|
||||
: "!bg-[#F5F5F5] !text-[#3B3B3B]"
|
||||
}
|
||||
`}
|
||||
onClick={() => setActiveBtn(idx)}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
{name}
|
||||
</Button>
|
||||
</li>
|
||||
)
|
||||
onClick={() => setActiveBtn(idx)}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
{name}
|
||||
</Button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemTitle
|
||||
export default ItemTitle;
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
'use client';
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import ItemTitle from "./ItemTitle";
|
||||
|
||||
const listTitle = ['سلامت روان', 'پوست و مو', 'کودک و نوجوان', 'دارو', 'تغذیه'];
|
||||
const listTitle = ["سلامت روان", "پوست و مو", "کودک و نوجوان", "دارو", "تغذیه"];
|
||||
|
||||
function Title() {
|
||||
const [activeBtn, setActiveBtn] = useState(0);
|
||||
|
||||
const [activeBtn, setActiveBtn] = useState(0);
|
||||
|
||||
return (
|
||||
<ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
|
||||
{listTitle.map((name, idx) => (
|
||||
<ItemTitle
|
||||
setActiveBtn={setActiveBtn}
|
||||
activeBtn={activeBtn}
|
||||
name={name}
|
||||
idx={idx}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
|
||||
{listTitle.map((name, idx) => (
|
||||
<ItemTitle
|
||||
setActiveBtn={setActiveBtn}
|
||||
activeBtn={activeBtn}
|
||||
name={name}
|
||||
idx={idx}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Title
|
||||
export default Title;
|
||||
|
||||
@@ -1,28 +1,29 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
|
||||
function PlaceVisit({ locateVisit, setLocateVisit, isError }) {
|
||||
const clinics = [
|
||||
{ label: "درمانگاه رازی", id: 10 },
|
||||
{ label: "درمانگاه ابوعلی", id: 20 },
|
||||
{ label: "درمانگاه مرکزی", id: 30 },
|
||||
];
|
||||
|
||||
const clinics = [
|
||||
{ label: 'درمانگاه رازی', id: 10 },
|
||||
{ label: 'درمانگاه ابوعلی', id: 20 },
|
||||
{ label: 'درمانگاه مرکزی', id: 30 }
|
||||
];
|
||||
const updateData = (event) => setLocateVisit(event.target.innerText);
|
||||
|
||||
const updateData = event => setLocateVisit(event.target.innerText);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-start gap-[19px] justify-start">
|
||||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">1. انتخاب محل ویزیت</p>
|
||||
<AutoCompleteSelect
|
||||
isError={isError && !locateVisit}
|
||||
updateData={updateData}
|
||||
label='درمانگاه'
|
||||
list={clinics}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-col items-start gap-[19px] justify-start">
|
||||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
|
||||
1. انتخاب محل ویزیت
|
||||
</p>
|
||||
<AutoCompleteSelect
|
||||
isError={isError && !locateVisit}
|
||||
updateData={updateData}
|
||||
label="درمانگاه"
|
||||
list={clinics}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlaceVisit
|
||||
export default PlaceVisit;
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import DatePicker from "@/app/component/date/datePicker"
|
||||
import DatePicker from "@/app/component/date/datePicker";
|
||||
|
||||
function SelectDatePicker() {
|
||||
return (
|
||||
<DatePicker />
|
||||
)
|
||||
return <DatePicker />;
|
||||
}
|
||||
|
||||
export default SelectDatePicker
|
||||
export default SelectDatePicker;
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import SelectDatePicker from "./SelectDatePicker"
|
||||
import SelectDatePicker from "./SelectDatePicker";
|
||||
|
||||
function Time({ isStep }) {
|
||||
return (
|
||||
<div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
|
||||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">2. انتخاب روز</p>
|
||||
<SelectDatePicker />
|
||||
{!isStep && (
|
||||
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
|
||||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
|
||||
2. انتخاب روز
|
||||
</p>
|
||||
<SelectDatePicker />
|
||||
{!isStep && (
|
||||
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Time
|
||||
export default Time;
|
||||
|
||||
@@ -1,20 +1,22 @@
|
||||
import DateTime from "@/app/component/date/dateTime"
|
||||
import DateTime from "@/app/component/date/dateTime";
|
||||
|
||||
function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
|
||||
return (
|
||||
<div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
|
||||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">3. انتخاب ساعت</p>
|
||||
<DateTime
|
||||
doctor={doctor}
|
||||
setStep={setStep}
|
||||
setIsError={setIsError}
|
||||
locateVisit={locateVisit}
|
||||
/>
|
||||
{!isStep && (
|
||||
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
|
||||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
|
||||
3. انتخاب ساعت
|
||||
</p>
|
||||
<DateTime
|
||||
doctor={doctor}
|
||||
setStep={setStep}
|
||||
setIsError={setIsError}
|
||||
locateVisit={locateVisit}
|
||||
/>
|
||||
{!isStep && (
|
||||
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Hour
|
||||
export default Hour;
|
||||
|
||||
@@ -4,34 +4,35 @@ import Time from "./Time";
|
||||
import PlaceVisit from "./PlaceVisit";
|
||||
|
||||
function Date({ doctor, setStep }) {
|
||||
const [locateVisit, setLocateVisit] = useState();
|
||||
const [isError, setIsError] = useState(false);
|
||||
|
||||
const [locateVisit, setLocateVisit] = useState();
|
||||
const [isError, setIsError] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="w-full lg:w-[61%]">
|
||||
<div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF]
|
||||
bg-transparent lg:bg-[#FFF]">
|
||||
<PlaceVisit
|
||||
setLocateVisit={setLocateVisit}
|
||||
locateVisit={locateVisit}
|
||||
isError={isError}
|
||||
/>
|
||||
<Time
|
||||
isStep={doctor.multiwork ? locateVisit : true}
|
||||
locateVisit={locateVisit}
|
||||
/>
|
||||
<Hour
|
||||
isStep={doctor.multiwork ? locateVisit : true}
|
||||
setLocateVisit={setLocateVisit}
|
||||
locateVisit={locateVisit}
|
||||
setIsError={setIsError}
|
||||
setStep={setStep}
|
||||
doctor={doctor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full lg:w-[61%]">
|
||||
<div
|
||||
className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF]
|
||||
bg-transparent lg:bg-[#FFF]"
|
||||
>
|
||||
<PlaceVisit
|
||||
setLocateVisit={setLocateVisit}
|
||||
locateVisit={locateVisit}
|
||||
isError={isError}
|
||||
/>
|
||||
<Time
|
||||
isStep={doctor.multiwork ? locateVisit : true}
|
||||
locateVisit={locateVisit}
|
||||
/>
|
||||
<Hour
|
||||
isStep={doctor.multiwork ? locateVisit : true}
|
||||
setLocateVisit={setLocateVisit}
|
||||
locateVisit={locateVisit}
|
||||
setIsError={setIsError}
|
||||
setStep={setStep}
|
||||
doctor={doctor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Date
|
||||
export default Date;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
function Content({ isConfirmed, children, title }) {
|
||||
return (
|
||||
<div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
|
||||
<div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
|
||||
<div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
|
||||
<div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className='py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal'
|
||||
>تایید شده</p>
|
||||
<p className="py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal">
|
||||
تایید شده
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Content
|
||||
export default Content;
|
||||
|
||||
@@ -3,34 +3,40 @@ import EditField from "../../../app/component/EditField";
|
||||
import Content from "./Content";
|
||||
|
||||
const bime = [
|
||||
{ label: 'بیمه 1', id: 10 },
|
||||
{ label: 'بیمه 2', id: 20 },
|
||||
{ label: 'بیمه 3', id: 30 }
|
||||
{ label: "بیمه 1", id: 10 },
|
||||
{ label: "بیمه 2", id: 20 },
|
||||
{ label: "بیمه 3", id: 30 },
|
||||
];
|
||||
|
||||
function Form({ changeData, data, updateSelect, isForAnother }) {
|
||||
return (
|
||||
<div className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start
|
||||
justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2">
|
||||
<Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}>
|
||||
<EditField changeData={changeData} data={data?.phone} name='phone' />
|
||||
</Content>
|
||||
<Content title='کد ملی'>
|
||||
<EditField changeData={changeData} data={data?.codemeli} name='codemeli' />
|
||||
</Content>
|
||||
<Content title='نام و نام خانوادگی'>
|
||||
<EditField changeData={changeData} data={data?.name} name='name' />
|
||||
</Content>
|
||||
<Content title='نوع بیمه'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='نوع بیمه'
|
||||
name='first'
|
||||
list={bime}
|
||||
/>
|
||||
</Content>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div
|
||||
className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start
|
||||
justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
|
||||
>
|
||||
<Content title="شماره موبایل" isConfirmed={isForAnother ? false : true}>
|
||||
<EditField changeData={changeData} data={data?.phone} name="phone" />
|
||||
</Content>
|
||||
<Content title="کد ملی">
|
||||
<EditField
|
||||
changeData={changeData}
|
||||
data={data?.codemeli}
|
||||
name="codemeli"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نام و نام خانوادگی">
|
||||
<EditField changeData={changeData} data={data?.name} name="name" />
|
||||
</Content>
|
||||
<Content title="نوع بیمه">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="نوع بیمه"
|
||||
name="first"
|
||||
list={bime}
|
||||
/>
|
||||
</Content>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -5,73 +5,89 @@ import ArrowLeftB from "@/components/icons/ArrowLeftB";
|
||||
import ButtonFixed from "../paying/ButtonFixed";
|
||||
import Form from "./Form";
|
||||
|
||||
function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeElement, setIsPay }) {
|
||||
function Detail({
|
||||
isForAnother,
|
||||
setStep,
|
||||
setIsForAnother,
|
||||
data,
|
||||
setData,
|
||||
fadeElement,
|
||||
setIsPay,
|
||||
}) {
|
||||
const [selected, setSelected] = useState({
|
||||
first: "",
|
||||
second: "",
|
||||
});
|
||||
|
||||
const [selected, setSelected] = useState({
|
||||
first: '',
|
||||
second: ''
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value,
|
||||
},
|
||||
});
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value
|
||||
}
|
||||
});
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
return (
|
||||
// ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
|
||||
<div className="w-full lg:w-[59%]">
|
||||
<div
|
||||
className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
|
||||
return (
|
||||
// ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
|
||||
<div className="w-full lg:w-[59%]">
|
||||
<div
|
||||
className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
|
||||
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
|
||||
`}
|
||||
>
|
||||
<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={`
|
||||
>
|
||||
<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>
|
||||
)
|
||||
${
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Detail
|
||||
export default Detail;
|
||||
|
||||
@@ -5,40 +5,46 @@ import RefreshA from "@/components/icons/RefreshA";
|
||||
import InfoCircleRedA from "@/components/icons/InfoCircleRedA";
|
||||
|
||||
function FailedPay({ setStep, fadeElement }) {
|
||||
return (
|
||||
<div className='w-full lg:w-[59%]'>
|
||||
<div
|
||||
className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
|
||||
return (
|
||||
<div className="w-full lg:w-[59%]">
|
||||
<div
|
||||
className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
|
||||
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
|
||||
>
|
||||
<div className="mt-[7px]">
|
||||
<div className="flex flex-col justify-center items-center gap-[14px]">
|
||||
<InfoCircleRedA />
|
||||
<p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
پرداخت شما انجام نشد.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
|
||||
<Link href="/">
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
|
||||
>
|
||||
<RedoA />
|
||||
<p className="text-[#5559CE] text-[16px] font-medium">
|
||||
صفحه اصلی
|
||||
</p>
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => setStep((prev) => prev - 2)}
|
||||
className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
|
||||
>
|
||||
<div className="mt-[7px]">
|
||||
<div className="flex flex-col justify-center items-center gap-[14px]">
|
||||
<InfoCircleRedA />
|
||||
<p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">پرداخت شما انجام نشد.</p>
|
||||
</div>
|
||||
<div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
|
||||
<Link href='/'>
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
|
||||
>
|
||||
<RedoA />
|
||||
<p className="text-[#5559CE] text-[16px] font-medium">صفحه اصلی</p>
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => setStep(prev => prev - 2)}
|
||||
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>
|
||||
</div>
|
||||
<RefreshA />
|
||||
<p className="text-[#FAFAFA] text-[16px] font-medium">
|
||||
تلاش دوباره
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FailedPay
|
||||
export default FailedPay;
|
||||
|
||||
+29
-16
@@ -1,19 +1,32 @@
|
||||
import Information from "./information"
|
||||
import Location from "./location"
|
||||
import Information from "./information";
|
||||
import Location from "./location";
|
||||
|
||||
function BookingPage({ doctor, step, setStep, children, isFirst, disableSide }) {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
|
||||
items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]">
|
||||
{isFirst ? (
|
||||
<Location disableSide={disableSide} doctor={doctor} />
|
||||
) : (
|
||||
<Information disableSide={disableSide} doctor={doctor} step={step} setStep={setStep} />
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
function BookingPage({
|
||||
doctor,
|
||||
step,
|
||||
setStep,
|
||||
children,
|
||||
isFirst,
|
||||
disableSide,
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
|
||||
items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]"
|
||||
>
|
||||
{isFirst ? (
|
||||
<Location disableSide={disableSide} doctor={doctor} />
|
||||
) : (
|
||||
<Information
|
||||
disableSide={disableSide}
|
||||
doctor={doctor}
|
||||
step={step}
|
||||
setStep={setStep}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BookingPage
|
||||
export default BookingPage;
|
||||
|
||||
@@ -1,94 +1,113 @@
|
||||
import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA"
|
||||
import CalendarA from "@/components/icons/CalendarA"
|
||||
import ClockA from "@/components/icons/ClockA"
|
||||
import LocationA from "@/components/icons/LocationA"
|
||||
import TickCircleOrange from "@/components/icons/TickCircleOrange"
|
||||
import { Button } from "@mui/material"
|
||||
import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA";
|
||||
import CalendarA from "@/components/icons/CalendarA";
|
||||
import ClockA from "@/components/icons/ClockA";
|
||||
import LocationA from "@/components/icons/LocationA";
|
||||
import TickCircleOrange from "@/components/icons/TickCircleOrange";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function Detail({ doctor, step, setStep }) {
|
||||
return (
|
||||
<div className="">
|
||||
<ul className="flex flex-col items-start justify-start gap-[24px]">
|
||||
<li className="flex items-center justify-start gap-[4px]">
|
||||
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
|
||||
<LocationA />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-normal">آدرس: {doctor.location}</p>
|
||||
</li>
|
||||
<li className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[4px]">
|
||||
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
|
||||
<CalendarA />
|
||||
</div>
|
||||
<div className="flex items-center justify-start">
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تاریخ نوبت: </p>
|
||||
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">13 خرداد 1403</p>
|
||||
</div>
|
||||
</div>
|
||||
{step < 5 && (
|
||||
<Button
|
||||
className="!p-1 !flex !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setStep(0)}
|
||||
variant="text"
|
||||
>
|
||||
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
|
||||
<div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
|
||||
<ArrowLeftOrangeA />
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
<li className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[4px]">
|
||||
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
|
||||
<ClockA />
|
||||
</div>
|
||||
<div className="flex items-center justify-start">
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">زمان نوبت: </p>
|
||||
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">ساعت 17:20</p>
|
||||
</div>
|
||||
</div>
|
||||
{step < 5 && (
|
||||
<Button
|
||||
className="!p-1 !flex !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setStep(0)}
|
||||
variant="text"
|
||||
>
|
||||
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
|
||||
<div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
|
||||
<ArrowLeftOrangeA />
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
<span
|
||||
className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px]
|
||||
return (
|
||||
<div className="">
|
||||
<ul className="flex flex-col items-start justify-start gap-[24px]">
|
||||
<li className="flex items-center justify-start gap-[4px]">
|
||||
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
|
||||
<LocationA />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-normal">
|
||||
آدرس: {doctor.location}
|
||||
</p>
|
||||
</li>
|
||||
<li className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[4px]">
|
||||
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
|
||||
<CalendarA />
|
||||
</div>
|
||||
<div className="flex items-center justify-start">
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
|
||||
تاریخ نوبت:{" "}
|
||||
</p>
|
||||
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
|
||||
13 خرداد 1403
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{step < 5 && (
|
||||
<Button
|
||||
className="!p-1 !flex !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setStep(0)}
|
||||
variant="text"
|
||||
>
|
||||
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">
|
||||
تغییر{" "}
|
||||
</p>
|
||||
<div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
|
||||
<ArrowLeftOrangeA />
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
<li className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[4px]">
|
||||
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
|
||||
<ClockA />
|
||||
</div>
|
||||
<div className="flex items-center justify-start">
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
|
||||
زمان نوبت:{" "}
|
||||
</p>
|
||||
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
|
||||
ساعت 17:20
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{step < 5 && (
|
||||
<Button
|
||||
className="!p-1 !flex !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setStep(0)}
|
||||
variant="text"
|
||||
>
|
||||
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">
|
||||
تغییر{" "}
|
||||
</p>
|
||||
<div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
|
||||
<ArrowLeftOrangeA />
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
<span
|
||||
className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px]
|
||||
mb-[8px] sm:mb-[13px] md:mb-[19px] lg:mb-[24px]
|
||||
w-full h-px bg-[#D7D7D7] block"
|
||||
></span>
|
||||
<ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
|
||||
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
|
||||
<div
|
||||
className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
|
||||
></span>
|
||||
<ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
|
||||
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
|
||||
<div
|
||||
className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
|
||||
w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
|
||||
>
|
||||
<TickCircleOrange />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
|
||||
</li>
|
||||
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
|
||||
<div
|
||||
className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
|
||||
>
|
||||
<TickCircleOrange />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[16px] font-normal">
|
||||
فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه
|
||||
ممکن می باشد.
|
||||
</p>
|
||||
</li>
|
||||
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
|
||||
<div
|
||||
className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
|
||||
w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
|
||||
>
|
||||
<TickCircleOrange />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
<TickCircleOrange />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[16px] font-normal">
|
||||
لطفا به موقع در مطب حضور داشته باشید.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Detail
|
||||
export default Detail;
|
||||
|
||||
@@ -1,29 +1,35 @@
|
||||
import Image from "next/image"
|
||||
import Image from "next/image";
|
||||
|
||||
function Head({ doctor }) {
|
||||
return (
|
||||
<div className="
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
flex items-center justify-start
|
||||
gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px]
|
||||
mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px]
|
||||
mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px]
|
||||
">
|
||||
<Image
|
||||
className="
|
||||
"
|
||||
>
|
||||
<Image
|
||||
className="
|
||||
w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
|
||||
h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
|
||||
"
|
||||
alt="profile doctor"
|
||||
src={doctor.img}
|
||||
height={95}
|
||||
width={95}
|
||||
/>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px]">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">{doctor.name}</p>
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
alt="profile doctor"
|
||||
src={doctor.img}
|
||||
height={95}
|
||||
width={95}
|
||||
/>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px]">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
{doctor.name}
|
||||
</p>
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
|
||||
تخصص: {doctor.expertise}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,22 +1,30 @@
|
||||
import Detail from "./Detail"
|
||||
import Head from "./Head"
|
||||
import Detail from "./Detail";
|
||||
import Head from "./Head";
|
||||
|
||||
function Information({ doctor, step, setStep, typePay, isPay, disableSide }) {
|
||||
return (
|
||||
<div className={`w-full lg:w-[41%] relative ${disableSide ? 'hidden lg:flex' : ''}`}>
|
||||
<div
|
||||
className={`p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border
|
||||
return (
|
||||
<div
|
||||
className={`w-full lg:w-[41%] relative ${
|
||||
disableSide ? "hidden lg:flex" : ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border
|
||||
border-solid border-[#EFEFEF] bg-[#FFF]
|
||||
top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]
|
||||
${typePay === 'success' || typePay === 'failed' ? 'hidden md:block' : 'block'}
|
||||
${
|
||||
typePay === "success" || typePay === "failed"
|
||||
? "hidden md:block"
|
||||
: "block"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
|
||||
<Head doctor={doctor} />
|
||||
<Detail doctor={doctor} step={step} setStep={setStep} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
|
||||
<Head doctor={doctor} />
|
||||
<Detail doctor={doctor} step={step} setStep={setStep} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Information
|
||||
export default Information;
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
function Address({ doctor }) {
|
||||
return (
|
||||
<ul className='hidden mt-[4px] lg:flex flex-col'>
|
||||
{doctor.address.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
>
|
||||
<div className='flex py-[12px] text-[#616161] text-[14px] items-start justify-start'>
|
||||
<p className='font-bold min-w-[115px]'>{`${item.name}: `}</p>
|
||||
<p className='font-normal'>{item.location}</p>
|
||||
</div>
|
||||
{doctor.address.length > idx + 1 && (
|
||||
<span className='bg-[#EFEFEF] block h-px w-full'></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="hidden mt-[4px] lg:flex flex-col">
|
||||
{doctor.address.map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<div className="flex py-[12px] text-[#616161] text-[14px] items-start justify-start">
|
||||
<p className="font-bold min-w-[115px]">{`${item.name}: `}</p>
|
||||
<p className="font-normal">{item.location}</p>
|
||||
</div>
|
||||
{doctor.address.length > idx + 1 && (
|
||||
<span className="bg-[#EFEFEF] block h-px w-full"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Address
|
||||
export default Address;
|
||||
|
||||
@@ -1,24 +1,28 @@
|
||||
import Image from 'next/image'
|
||||
import Image from "next/image";
|
||||
|
||||
function Head({ doctor }) {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px]">
|
||||
<Image
|
||||
className='
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px]">
|
||||
<Image
|
||||
className="
|
||||
w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
|
||||
h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
|
||||
'
|
||||
src={doctor.img}
|
||||
alt="profile"
|
||||
height={56}
|
||||
width={56}
|
||||
/>
|
||||
<div className="flex flex-col items-start justify-start gap-[8px]">
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">{doctor.name}</p>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {doctor.expertise}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
"
|
||||
src={doctor.img}
|
||||
alt="profile"
|
||||
height={56}
|
||||
width={56}
|
||||
/>
|
||||
<div className="flex flex-col items-start justify-start gap-[8px]">
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">
|
||||
{doctor.name}
|
||||
</p>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">
|
||||
تخصص: {doctor.expertise}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -2,18 +2,18 @@ import Address from "./Address";
|
||||
import Head from "./Head";
|
||||
|
||||
function Location({ doctor }) {
|
||||
return (
|
||||
<div className="h-fit lg:h-screen w-full lg:w-[39%]">
|
||||
<div
|
||||
className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
|
||||
return (
|
||||
<div className="h-fit lg:h-screen w-full lg:w-[39%]">
|
||||
<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)]"
|
||||
>
|
||||
<Head doctor={doctor} />
|
||||
<span className="block bg-[#EFEFEF] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span>
|
||||
<Address doctor={doctor} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
<Head doctor={doctor} />
|
||||
<span className="block bg-[#EFEFEF] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span>
|
||||
<Address doctor={doctor} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Location
|
||||
export default Location;
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
function ButtonFixed({ children }) {
|
||||
return (
|
||||
<div
|
||||
className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t
|
||||
return (
|
||||
<div
|
||||
className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t
|
||||
md:border-t-transparent border-[#D7D7D7] z-10
|
||||
!w-full sm:!w-full !p-[16px] sm:!px-[52px] md:!ml-0 md:!p-0 md:!w-full"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ButtonFixed
|
||||
export default ButtonFixed;
|
||||
|
||||
@@ -1,38 +1,46 @@
|
||||
import ArrowLeftB from '@/components/icons/ArrowLeftB';
|
||||
import { Button } from '@mui/material';
|
||||
import ButtonFixed from './ButtonFixed';
|
||||
import ArrowLeftB from "@/components/icons/ArrowLeftB";
|
||||
import { Button } from "@mui/material";
|
||||
import ButtonFixed from "./ButtonFixed";
|
||||
|
||||
function Paying({ setTypePay, fadeElement, setStep }) {
|
||||
return (
|
||||
<div className='w-full lg:w-[59%]'>
|
||||
<div
|
||||
className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
|
||||
return (
|
||||
<div className="w-full lg:w-[59%]">
|
||||
<div
|
||||
className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
|
||||
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
|
||||
>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
اطلاعات پرداخت
|
||||
</p>
|
||||
<div className='flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]'>
|
||||
<p className='text-[#616161] text-[14px] md:text-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
|
||||
<p className='text-[#525252] text-[14px] md:text-[16px] font-bold'>20،000 تومان</p>
|
||||
</div>
|
||||
<span className='bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]'></span>
|
||||
<ButtonFixed>
|
||||
<div className='flex items-center justify-between gap-2'>
|
||||
<p className='text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
|
||||
<Button
|
||||
className='!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]'
|
||||
onClick={() => setStep(prev => prev + 1)}
|
||||
variant="contained"
|
||||
>
|
||||
<p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
|
||||
<ArrowLeftB />
|
||||
</Button>
|
||||
</div>
|
||||
</ButtonFixed>
|
||||
</div>
|
||||
>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
اطلاعات پرداخت
|
||||
</p>
|
||||
<div className="flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]">
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
|
||||
مبلغ پیش پرداخت (بیعانه) :{" "}
|
||||
</p>
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
|
||||
20،000 تومان
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
<span className="bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]"></span>
|
||||
<ButtonFixed>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
|
||||
مبلغ قابل پرداخت : 20،000 تومان
|
||||
</p>
|
||||
<Button
|
||||
className="!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]"
|
||||
onClick={() => setStep((prev) => prev + 1)}
|
||||
variant="contained"
|
||||
>
|
||||
<p className="text-[#EFEFEF] text-[16px] font-medium">
|
||||
پرداخت نهایی
|
||||
</p>
|
||||
<ArrowLeftB />
|
||||
</Button>
|
||||
</div>
|
||||
</ButtonFixed>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Paying
|
||||
export default Paying;
|
||||
|
||||
@@ -1,46 +1,56 @@
|
||||
import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA"
|
||||
import TickCircleGreenA from "@/components/icons/TickCircleGreenA"
|
||||
import { Button } from "@mui/material"
|
||||
import Link from "next/link"
|
||||
import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA";
|
||||
import TickCircleGreenA from "@/components/icons/TickCircleGreenA";
|
||||
import { Button } from "@mui/material";
|
||||
import Link from "next/link";
|
||||
|
||||
function SuccessPay({ setStep }) {
|
||||
return (
|
||||
<div className='w-full lg:w-[59%]'>
|
||||
<div
|
||||
className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
|
||||
return (
|
||||
<div className="w-full lg:w-[59%]">
|
||||
<div
|
||||
className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
|
||||
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px]
|
||||
mb-[24px] md:mb-[16px]"
|
||||
>برای نمایش نوبت ها به قسمت نوبت های من بروید. </p>
|
||||
<div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
|
||||
<span className="w-full block h-px bg-[#EFEFEF]"></span>
|
||||
<div className="flex items-center justify-between my-[20px] gap-[80px]">
|
||||
<p className="text-[#616161] text-[14px] font-medium">مقدار پرداخت شده: </p>
|
||||
<p className="text-[#05BA58] text-[14px] font-bold">20،000 تومان</p>
|
||||
</div>
|
||||
<span className="w-full block h-px bg-[#EFEFEF]"></span>
|
||||
</div>
|
||||
<Link href='/dashboard'>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !items-center !justify-center !gap-[4px]"
|
||||
>
|
||||
<p className="text-[16px] font-medium text-[#5559CE]">برو به نوبت های من</p>
|
||||
<ArrowLeftBlueA />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
>
|
||||
برای نمایش نوبت ها به قسمت نوبت های من بروید.{" "}
|
||||
</p>
|
||||
<div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
|
||||
<span className="w-full block h-px bg-[#EFEFEF]"></span>
|
||||
<div className="flex items-center justify-between my-[20px] gap-[80px]">
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
مقدار پرداخت شده:{" "}
|
||||
</p>
|
||||
<p className="text-[#05BA58] text-[14px] font-bold">
|
||||
20،000 تومان
|
||||
</p>
|
||||
</div>
|
||||
<span className="w-full block h-px bg-[#EFEFEF]"></span>
|
||||
</div>
|
||||
<Link href="/dashboard">
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !items-center !justify-center !gap-[4px]"
|
||||
>
|
||||
<p className="text-[16px] font-medium text-[#5559CE]">
|
||||
برو به نوبت های من
|
||||
</p>
|
||||
<ArrowLeftBlueA />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SuccessPay
|
||||
export default SuccessPay;
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
import TextLoading from '@/app/component/loading/Text'
|
||||
import React from 'react'
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import React from "react";
|
||||
|
||||
function ContentDetail({ head, children, loading }) {
|
||||
return (
|
||||
<div className='my-[24px]'>
|
||||
<TextLoading width={200} height={20} loading={loading}>
|
||||
<p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p>
|
||||
</TextLoading>
|
||||
<div className='mt-[16px]'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="my-[24px]">
|
||||
<TextLoading width={200} height={20} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">{head}</p>
|
||||
</TextLoading>
|
||||
<div className="mt-[16px]">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContentDetail
|
||||
export default ContentDetail;
|
||||
|
||||
@@ -1,27 +1,24 @@
|
||||
import CustomLoading from '@/app/component/loading/Custom'
|
||||
import Image from 'next/image'
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import Image from "next/image";
|
||||
|
||||
function ListBime({ data, loading }) {
|
||||
return (
|
||||
<ul className='flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]'>
|
||||
{data.list_bime.map((item, idx) => (
|
||||
<CustomLoading width={156} height={110} loading={loading}>
|
||||
<li
|
||||
key={idx}
|
||||
className='p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]'
|
||||
>
|
||||
<Image
|
||||
src={item.img}
|
||||
height={92}
|
||||
width={92}
|
||||
alt='bime'
|
||||
/>
|
||||
<p className='text-[#525252] text-[16px] font-medium'>{item.name}</p>
|
||||
</li>
|
||||
</CustomLoading>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
|
||||
{data.list_bime.map((item, idx) => (
|
||||
<CustomLoading width={156} height={110} loading={loading}>
|
||||
<li
|
||||
key={idx}
|
||||
className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
|
||||
>
|
||||
<Image src={item.img} height={92} width={92} alt="bime" />
|
||||
<p className="text-[#525252] text-[16px] font-medium">
|
||||
{item.name}
|
||||
</p>
|
||||
</li>
|
||||
</CustomLoading>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default ListBime
|
||||
export default ListBime;
|
||||
|
||||
@@ -1,32 +1,33 @@
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import TickCircleOrange from '@/components/icons/TickCircleOrange';
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import TickCircleOrange from "@/components/icons/TickCircleOrange";
|
||||
|
||||
function Services({ data, loading }) {
|
||||
return (
|
||||
<ul className='
|
||||
<ul
|
||||
className="
|
||||
mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
|
||||
gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px]
|
||||
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]'>
|
||||
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
|
||||
>
|
||||
{data.specialties.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className='flex items-start justify-start gap-2'
|
||||
>
|
||||
<div className='min-w-[24px] min-h-[24px]'>
|
||||
<li key={idx} className="flex items-start justify-start gap-2">
|
||||
<div className="min-w-[24px] min-h-[24px]">
|
||||
<TickCircleOrange />
|
||||
</div>
|
||||
<TextLoading width={80} height={18} loading={loading}>
|
||||
<p
|
||||
className={`
|
||||
text-[16px] font-normal
|
||||
${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
|
||||
${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
|
||||
`}
|
||||
>{item}</p>
|
||||
>
|
||||
{item}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Services
|
||||
export default Services;
|
||||
|
||||
@@ -1,32 +1,33 @@
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import TickCircleOrange from '@/components/icons/TickCircleOrange';
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import TickCircleOrange from "@/components/icons/TickCircleOrange";
|
||||
|
||||
function Specialties({ data, loading }) {
|
||||
return (
|
||||
<ul className='
|
||||
return (
|
||||
<ul
|
||||
className="
|
||||
mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
|
||||
gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px]
|
||||
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]'>
|
||||
{data.specialties.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className='flex items-start justify-start gap-2'
|
||||
>
|
||||
<div className='min-w-[24px] min-h-[24px]'>
|
||||
<TickCircleOrange />
|
||||
</div>
|
||||
<TextLoading width={80} height={18} loading={loading}>
|
||||
<p
|
||||
className={`
|
||||
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
|
||||
>
|
||||
{data.specialties.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start justify-start gap-2">
|
||||
<div className="min-w-[24px] min-h-[24px]">
|
||||
<TickCircleOrange />
|
||||
</div>
|
||||
<TextLoading width={80} height={18} loading={loading}>
|
||||
<p
|
||||
className={`
|
||||
text-[16px] font-normal
|
||||
${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
|
||||
${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
|
||||
`}
|
||||
>{item}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
>
|
||||
{item}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Specialties
|
||||
export default Specialties;
|
||||
|
||||
@@ -1,30 +1,31 @@
|
||||
import List from './List';
|
||||
import Slider from './Slider';
|
||||
import Image from 'next/image';
|
||||
import CustomLoading from '@/app/component/loading/Custom';
|
||||
import List from "./List";
|
||||
import Slider from "./Slider";
|
||||
import Image from "next/image";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
|
||||
function Images({ data, loading }) {
|
||||
return (
|
||||
<div
|
||||
className='
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
|
||||
gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden
|
||||
'>
|
||||
<div className='w-full'>
|
||||
<CustomLoading loading={loading} width={600} height={400}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[0]}
|
||||
alt="img clinic"
|
||||
height={432}
|
||||
width={600}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<List data={data} loading={loading} />
|
||||
<Slider data={data} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
"
|
||||
>
|
||||
<div className="w-full">
|
||||
<CustomLoading loading={loading} width={600} height={400}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[0]}
|
||||
alt="img clinic"
|
||||
height={432}
|
||||
width={600}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<List data={data} loading={loading} />
|
||||
<Slider data={data} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Images
|
||||
export default Images;
|
||||
|
||||
@@ -1,55 +1,55 @@
|
||||
import CustomLoading from '@/app/component/loading/Custom';
|
||||
import Image from 'next/image';
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import Image from "next/image";
|
||||
|
||||
function List({ data, loading }) {
|
||||
return (
|
||||
<div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
|
||||
<div className='w-full'>
|
||||
<CustomLoading loading={loading} width='full' height={190}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[1]}
|
||||
alt="img clinic"
|
||||
height={204}
|
||||
width={288}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CustomLoading loading={loading} width='full' height={190}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[2]}
|
||||
alt="img clinic"
|
||||
height={204}
|
||||
width={288}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CustomLoading loading={loading} width='full' height={190}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[3]}
|
||||
alt="img clinic"
|
||||
height={204}
|
||||
width={288}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CustomLoading loading={loading} width='full' height={190}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[4]}
|
||||
alt="img clinic"
|
||||
height={204}
|
||||
width={288}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
|
||||
<div className="w-full">
|
||||
<CustomLoading loading={loading} width="full" height={190}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[1]}
|
||||
alt="img clinic"
|
||||
height={204}
|
||||
width={288}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<CustomLoading loading={loading} width="full" height={190}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[2]}
|
||||
alt="img clinic"
|
||||
height={204}
|
||||
width={288}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<CustomLoading loading={loading} width="full" height={190}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[3]}
|
||||
alt="img clinic"
|
||||
height={204}
|
||||
width={288}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<CustomLoading loading={loading} width="full" height={190}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden"
|
||||
src={data.images_clinic[4]}
|
||||
alt="img clinic"
|
||||
height={204}
|
||||
width={288}
|
||||
/>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
import CustomLoading from "@/app/component/loading/Custom"
|
||||
import Image from "next/image"
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import Image from "next/image";
|
||||
|
||||
function Slider({ data, loading }) {
|
||||
return (
|
||||
<ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
|
||||
{[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
|
||||
idx !== 0 ? (
|
||||
<CustomLoading width={90} height={90} loading={loading}>
|
||||
<Image
|
||||
key={idx}
|
||||
src={item}
|
||||
width={90}
|
||||
height={90}
|
||||
alt="image clinic"
|
||||
className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
|
||||
/>
|
||||
</CustomLoading>
|
||||
) : undefined)}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
|
||||
{[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
|
||||
idx !== 0 ? (
|
||||
<CustomLoading width={90} height={90} loading={loading}>
|
||||
<Image
|
||||
key={idx}
|
||||
src={item}
|
||||
width={90}
|
||||
height={90}
|
||||
alt="image clinic"
|
||||
className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
|
||||
/>
|
||||
</CustomLoading>
|
||||
) : undefined
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Slider
|
||||
export default Slider;
|
||||
|
||||
@@ -9,48 +9,55 @@ import ContentDetail from "./ContentDetail";
|
||||
import MultilineLoading from "@/app/component/loading/Multiline";
|
||||
|
||||
function About({ data, loading }) {
|
||||
const [isMore, setIsMore] = useState(false);
|
||||
|
||||
const [isMore, setIsMore] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="opacity-page transition-all duration-500">
|
||||
<Images data={data} loading={loading} />
|
||||
<ContentDetail loading={loading} head='کلینیک تخصصی و فوق تخصصی نیکان'>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<MultilineLoading line={10} loading={loading} width='full' height={18}>
|
||||
<p
|
||||
className={`
|
||||
return (
|
||||
<div className="opacity-page transition-all duration-500">
|
||||
<Images data={data} loading={loading} />
|
||||
<ContentDetail loading={loading} head="کلینیک تخصصی و فوق تخصصی نیکان">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<MultilineLoading
|
||||
line={10}
|
||||
loading={loading}
|
||||
width="full"
|
||||
height={18}
|
||||
>
|
||||
<p
|
||||
className={`
|
||||
text-[#525252] text-[16px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[32px] overflow-hidden relative
|
||||
after:absolute after:right-0 after:bottom-0 after:h-[80px]
|
||||
after:shadow-xl after:w-full transition-all duration-500
|
||||
${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]"
|
||||
}
|
||||
`}
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
></p>
|
||||
</MultilineLoading>
|
||||
<Button
|
||||
className={`${loading && '!hidden'} !text-[#F17732] !text-[14px] !font-light !p-2`}
|
||||
onClick={() => setIsMore(!isMore)}
|
||||
variant="text"
|
||||
>
|
||||
{isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
|
||||
</Button>
|
||||
</div>
|
||||
</ContentDetail>
|
||||
<ContentDetail head='بیمه های طرف قرارداد'>
|
||||
<ListBime loading={loading} data={data} />
|
||||
</ContentDetail>
|
||||
<ContentDetail head='تخصص ها'>
|
||||
<Specialties loading={loading} data={data} />
|
||||
</ContentDetail>
|
||||
<ContentDetail head='خدمات'>
|
||||
<Services loading={loading} data={data} />
|
||||
</ContentDetail>
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
></p>
|
||||
</MultilineLoading>
|
||||
<Button
|
||||
className={`${
|
||||
loading && "!hidden"
|
||||
} !text-[#F17732] !text-[14px] !font-light !p-2`}
|
||||
onClick={() => setIsMore(!isMore)}
|
||||
variant="text"
|
||||
>
|
||||
{isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
</ContentDetail>
|
||||
<ContentDetail head="بیمه های طرف قرارداد">
|
||||
<ListBime loading={loading} data={data} />
|
||||
</ContentDetail>
|
||||
<ContentDetail head="تخصص ها">
|
||||
<Specialties loading={loading} data={data} />
|
||||
</ContentDetail>
|
||||
<ContentDetail head="خدمات">
|
||||
<Services loading={loading} data={data} />
|
||||
</ContentDetail>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default About
|
||||
export default About;
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function ContentDetail({ head, detail, loading }) {
|
||||
return (
|
||||
<li className="flex flex-col items-start justify-center gap-4">
|
||||
<TextLoading width={100} height={18} loading={loading}>
|
||||
<p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{head}</p>
|
||||
</TextLoading>
|
||||
<TextLoading width={160} height={18} loading={loading}>
|
||||
<p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
)
|
||||
return (
|
||||
<li className="flex flex-col items-start justify-center gap-4">
|
||||
<TextLoading width={100} height={18} loading={loading}>
|
||||
<p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
{head}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading width={160} height={18} loading={loading}>
|
||||
<p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContentDetail;
|
||||
export default ContentDetail;
|
||||
|
||||
@@ -1,30 +1,22 @@
|
||||
import ContentDetail from "./ContentDetail"
|
||||
import ContentDetail from "./ContentDetail";
|
||||
|
||||
function Detail({ data, loading }) {
|
||||
return (
|
||||
<ul className="flex flex-col items-start justify-start gap-[16px]">
|
||||
<ContentDetail
|
||||
head='روزهای کاری: '
|
||||
loading={loading}
|
||||
detail={`ساعت کاری: ${data.hours_of_work}`}
|
||||
/>
|
||||
<ContentDetail
|
||||
head='تلفن: '
|
||||
loading={loading}
|
||||
detail={`${data.phone_number_1} ${data.phone_number_2}`}
|
||||
/>
|
||||
<ContentDetail
|
||||
head='ایمیل:'
|
||||
loading={loading}
|
||||
detail={data.email}
|
||||
/>
|
||||
<ContentDetail
|
||||
head='آدرس: '
|
||||
loading={loading}
|
||||
detail={data.location}
|
||||
/>
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex flex-col items-start justify-start gap-[16px]">
|
||||
<ContentDetail
|
||||
head="روزهای کاری: "
|
||||
loading={loading}
|
||||
detail={`ساعت کاری: ${data.hours_of_work}`}
|
||||
/>
|
||||
<ContentDetail
|
||||
head="تلفن: "
|
||||
loading={loading}
|
||||
detail={`${data.phone_number_1} ${data.phone_number_2}`}
|
||||
/>
|
||||
<ContentDetail head="ایمیل:" loading={loading} detail={data.email} />
|
||||
<ContentDetail head="آدرس: " loading={loading} detail={data.location} />
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Detail
|
||||
export default Detail;
|
||||
|
||||
@@ -8,61 +8,58 @@ import ModalOpenLocation from "@/app/component/openLocation";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
|
||||
function Contact({ data, loading }) {
|
||||
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 (
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
opacity-page border border-[#EFEFEF] rounded-[16px]
|
||||
py-[12px] sm:py-[18px] md:py-[25px] lg:py-[32px]
|
||||
px-[12px] sm:px-[30px] md:px-[47px] lg:px-[64px]
|
||||
"
|
||||
>
|
||||
<div className="flex items-end justify-between">
|
||||
<Detail data={data} loading={loading} />
|
||||
<ModalOpenLocation
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClose={handleClose}
|
||||
>
|
||||
<div className="flex items-end justify-between">
|
||||
<Detail data={data} loading={loading} />
|
||||
<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
|
||||
className="w-full relative h-[460px] mt-[24px]"
|
||||
<Button
|
||||
className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
<RoutingC />
|
||||
مسیریابی
|
||||
</Button>
|
||||
</ModalOpenLocation>
|
||||
</div>
|
||||
<div className="w-full relative h-[460px] mt-[24px]">
|
||||
<CustomLoading width="full" height={400} loading={loading}>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
|
||||
className="w-full h-full rounded-lg"
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
<ModalOpenLocation
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClose={handleClose}
|
||||
>
|
||||
<Button
|
||||
className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<CustomLoading width='full' height={400} loading={loading}>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
|
||||
className='w-full h-full rounded-lg'
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
<ModalOpenLocation
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClose={handleClose}
|
||||
>
|
||||
<Button
|
||||
className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<RoutingWhiteC />
|
||||
</Button>
|
||||
</ModalOpenLocation>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<RoutingWhiteC />
|
||||
</Button>
|
||||
</ModalOpenLocation>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Contact
|
||||
export default Contact;
|
||||
|
||||
@@ -1,40 +1,44 @@
|
||||
import CloseModalD from '@/components/icons/CloseModalD'
|
||||
import Image from 'next/image'
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
import Image from "next/image";
|
||||
|
||||
const maps = [
|
||||
{ src: '/assets/images/snapp.png', name: 'snapp' },
|
||||
{ src: '/assets/images/tapsi.png', name: 'tapsi' },
|
||||
{ src: '/assets/images/maps.png', name: 'maps' },
|
||||
{ src: '/assets/images/balad.png', name: 'balad' },
|
||||
{ src: '/assets/images/waze.png', name: 'waze' }
|
||||
]
|
||||
{ src: "/assets/images/snapp.png", name: "snapp" },
|
||||
{ src: "/assets/images/tapsi.png", name: "tapsi" },
|
||||
{ src: "/assets/images/maps.png", name: "maps" },
|
||||
{ src: "/assets/images/balad.png", name: "balad" },
|
||||
{ src: "/assets/images/waze.png", name: "waze" },
|
||||
];
|
||||
|
||||
function Content({ handleClose }) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">باز شدن با</p>
|
||||
<div className="cursor-pointer" onClick={handleClose}>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
</div>
|
||||
<span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
|
||||
<ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
|
||||
{maps.map((item, idx) => (
|
||||
<li className="flex items-center flex-col justify-center gap-1">
|
||||
<Image
|
||||
className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]'
|
||||
src={item.src}
|
||||
alt="icon app"
|
||||
height={40}
|
||||
width={40}
|
||||
/>
|
||||
<p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
باز شدن با
|
||||
</p>
|
||||
<div className="cursor-pointer" onClick={handleClose}>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
</div>
|
||||
<span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
|
||||
<ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
|
||||
{maps.map((item, idx) => (
|
||||
<li className="flex items-center flex-col justify-center gap-1">
|
||||
<Image
|
||||
className="w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]"
|
||||
src={item.src}
|
||||
alt="icon app"
|
||||
height={40}
|
||||
width={40}
|
||||
/>
|
||||
<p className="text-[#3B3B3B] font-normal text-[14px]">
|
||||
{item.name}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content
|
||||
export default Content;
|
||||
|
||||
@@ -1,51 +1,44 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { Drawer, Modal } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import Content from "./Content";
|
||||
|
||||
function ModalOpenLocation({ open, setOpen, handleClose, children }) {
|
||||
const toggleDrawer = (newOpen) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
const toggleDrawer = (newOpen) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
{children}
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
className="!hidden md:!flex"
|
||||
>
|
||||
<div
|
||||
style={styleDefault}
|
||||
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
|
||||
>
|
||||
<Content onClose={handleClose} />
|
||||
</div>
|
||||
</Modal>
|
||||
<Drawer
|
||||
open={open}
|
||||
anchor="bottom"
|
||||
onClose={toggleDrawer(false)}
|
||||
className="!flex md:!hidden"
|
||||
sx={{
|
||||
'& .MuiPaper-root': {
|
||||
borderRadius: '25px 25px 0px 0px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]"
|
||||
>
|
||||
<Content handleClose={handleClose} />
|
||||
</div>
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
{children}
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose} className="!hidden md:!flex">
|
||||
<div
|
||||
style={styleDefault}
|
||||
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
|
||||
>
|
||||
<Content onClose={handleClose} />
|
||||
</div>
|
||||
</Modal>
|
||||
<Drawer
|
||||
open={open}
|
||||
anchor="bottom"
|
||||
onClose={toggleDrawer(false)}
|
||||
className="!flex md:!hidden"
|
||||
sx={{
|
||||
"& .MuiPaper-root": {
|
||||
borderRadius: "25px 25px 0px 0px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]">
|
||||
<Content handleClose={handleClose} />
|
||||
</div>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalOpenLocation
|
||||
export default ModalOpenLocation;
|
||||
|
||||
@@ -1,23 +1,19 @@
|
||||
import ItemDoctor from '@/app/component/ItemDoctor';
|
||||
import Pagination from '@/app/component/Pagination';
|
||||
import ItemDoctor from "@/app/component/ItemDoctor";
|
||||
import Pagination from "@/app/component/Pagination";
|
||||
|
||||
function List({ doctors, loading }) {
|
||||
return (
|
||||
<>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
{doctors.map(doctor => (
|
||||
<ItemDoctor
|
||||
key={doctor.id}
|
||||
doctor={doctor}
|
||||
loading={loading}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className='mt-[56px] flex justify-center'>
|
||||
<Pagination />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
{doctors.map((doctor) => (
|
||||
<ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-[56px] flex justify-center">
|
||||
<Pagination />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import SmSearch from '@/components/searchHead/SmSearch';
|
||||
import SmSearch from "@/components/searchHead/SmSearch";
|
||||
|
||||
function SearchBar() {
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<SmSearch
|
||||
placeholder='جستجوی پزشک یا تخصص'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<SmSearch placeholder="جستجوی پزشک یا تخصص" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchBar
|
||||
export default SearchBar;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import List from "./List"
|
||||
import SearchBar from "./SearchBar"
|
||||
import List from "./List";
|
||||
import SearchBar from "./SearchBar";
|
||||
|
||||
function Doctors({ doctors, loading }) {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<SearchBar />
|
||||
<List loading={loading} doctors={doctors} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<SearchBar />
|
||||
<List loading={loading} doctors={doctors} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Doctors
|
||||
export default Doctors;
|
||||
|
||||
+20
-21
@@ -1,16 +1,15 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import About from './components/about';
|
||||
import Contact from './components/contact';
|
||||
import Doctors from './components/doctors';
|
||||
import Tabs from '@/app/component/Tabs';
|
||||
import About from "./components/about";
|
||||
import Contact from "./components/contact";
|
||||
import Doctors from "./components/doctors";
|
||||
import Tabs from "@/app/component/Tabs";
|
||||
|
||||
const listTab = ['درباره کلینیک', 'اطلاعات تماس', 'پزشک ها'];
|
||||
const listTab = ["درباره کلینیک", "اطلاعات تماس", "پزشک ها"];
|
||||
|
||||
function ClinicPage({ data, doctors }) {
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
@@ -18,7 +17,7 @@ function ClinicPage({ data, doctors }) {
|
||||
const Components = [
|
||||
<About data={data} loading={loading} />,
|
||||
<Contact data={data} loading={loading} />,
|
||||
<Doctors doctors={doctors} loading={loading} />
|
||||
<Doctors doctors={doctors} loading={loading} />,
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
@@ -31,27 +30,27 @@ function ClinicPage({ data, doctors }) {
|
||||
<div className="pt-[40px] sm:pt-[70px] md:pt-[100px] lg:pt-[136px] mt-[40px] padding-responsive">
|
||||
<Tabs
|
||||
style={{
|
||||
'.MuiTabs-indicator': {
|
||||
height: '2px',
|
||||
borderRadius: '10px',
|
||||
background: '#F17732'
|
||||
".MuiTabs-indicator": {
|
||||
height: "2px",
|
||||
borderRadius: "10px",
|
||||
background: "#F17732",
|
||||
},
|
||||
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
|
||||
color: '#F17732 !important'
|
||||
"& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
|
||||
color: "#F17732 !important",
|
||||
},
|
||||
"& .MuiButtonBase-root.Mui-selected": {
|
||||
color: "#F17732 !important",
|
||||
},
|
||||
'& .MuiButtonBase-root.Mui-selected': {
|
||||
color: '#F17732 !important'
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<div className='mt-[24px] sm:mt-[27px] md:mt-[30px] lg:mt-[32px]'>
|
||||
<div className="mt-[24px] sm:mt-[27px] md:mt-[30px] lg:mt-[32px]">
|
||||
{Components[value]}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default ClinicPage
|
||||
export default ClinicPage;
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
import { Button, ButtonGroup, TextField } from '@mui/material';
|
||||
import SearchD from '@/components/icons/SearchD';
|
||||
import ModalSearchCity from './modal';
|
||||
import { Button, ButtonGroup, TextField } from "@mui/material";
|
||||
import SearchD from "@/components/icons/SearchD";
|
||||
import ModalSearchCity from "./modal";
|
||||
|
||||
function SearchBar() {
|
||||
return (
|
||||
<ButtonGroup
|
||||
variant="contained"
|
||||
className="
|
||||
return (
|
||||
<ButtonGroup
|
||||
variant="contained"
|
||||
className="
|
||||
!bg-[#FFF] !w-2/3 !mt-[30px] !rounded-lg !overflow-hidden flex items-center
|
||||
!shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
||||
!h-fit !pl-1"
|
||||
>
|
||||
<ModalSearchCity />
|
||||
<TextField
|
||||
variant="standard"
|
||||
InputProps={{
|
||||
disableUnderline: true
|
||||
}}
|
||||
sx={{
|
||||
background: 'transparent !important',
|
||||
'& .MuiInputBase-input': { color: '#7E7E7E' },
|
||||
'& .MuiInput-root': { borderBottom: 'none' },
|
||||
'& .MuiInputBase-root': { height: '100%' }
|
||||
}}
|
||||
placeholder="جستجوی تخصص"
|
||||
dir='rtl'
|
||||
className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
|
||||
/>
|
||||
<Button
|
||||
className="
|
||||
>
|
||||
<ModalSearchCity />
|
||||
<TextField
|
||||
variant="standard"
|
||||
InputProps={{
|
||||
disableUnderline: true,
|
||||
}}
|
||||
sx={{
|
||||
background: "transparent !important",
|
||||
"& .MuiInputBase-input": { color: "#7E7E7E" },
|
||||
"& .MuiInput-root": { borderBottom: "none" },
|
||||
"& .MuiInputBase-root": { height: "100%" },
|
||||
}}
|
||||
placeholder="جستجوی تخصص"
|
||||
dir="rtl"
|
||||
className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
|
||||
/>
|
||||
<Button
|
||||
className="
|
||||
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !min-w-fit
|
||||
!w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px]
|
||||
!h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px]
|
||||
"
|
||||
>
|
||||
<SearchD />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
)
|
||||
>
|
||||
<SearchD />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchBar
|
||||
export default SearchBar;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { styleDefault } from "@/mui";
|
||||
@@ -12,109 +12,105 @@ import ArrowLeftM from "@/components/icons/ArrowLeftM";
|
||||
import SettingD from "@/components/icons/SettingD";
|
||||
|
||||
function ModalSearchCity() {
|
||||
const states = [
|
||||
{ label: "تهران", id: 10 },
|
||||
{ label: "اصفهان", id: 20 },
|
||||
{ label: "مازندران", id: 30 },
|
||||
];
|
||||
|
||||
const states = [
|
||||
{ label: 'تهران', id: 10 },
|
||||
{ label: 'اصفهان', id: 20 },
|
||||
{ label: 'مازندران', id: 30 }
|
||||
];
|
||||
const cities = [
|
||||
{ label: "شهر یک", id: 10 },
|
||||
{ label: "شهر دو", id: 20 },
|
||||
{ label: "شهر سه", id: 30 },
|
||||
];
|
||||
|
||||
const cities = [
|
||||
{ label: 'شهر یک', id: 10 },
|
||||
{ label: 'شهر دو', id: 20 },
|
||||
{ label: 'شهر سه', id: 30 }
|
||||
];
|
||||
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);
|
||||
const [selected, setSelected] = useState({
|
||||
first: "",
|
||||
second: "",
|
||||
});
|
||||
|
||||
const [selected, setSelected] = useState({
|
||||
first: '',
|
||||
second: ''
|
||||
});
|
||||
const updateData = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const updateData = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className="
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className="
|
||||
!border-none !min-w-fit lg:!min-w-[122px] !bg-[#F8F8FF] !rounded-l-none
|
||||
!py-[15px] !px-[6px] md:!py-[17px] md:!px-[5px] lg:!py-[20px] lg:!px-[8px]
|
||||
"
|
||||
onClick={handleOpen}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px]">
|
||||
<SettingD />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-medium mx-2">
|
||||
{/* {selected.first && selected.second ?
|
||||
onClick={handleOpen}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px]">
|
||||
<SettingD />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-medium mx-2">
|
||||
{/* {selected.first && selected.second ?
|
||||
`${selected.first} | ${selected.second}` : 'فیلترها'} */}
|
||||
فیلترها
|
||||
</p>
|
||||
<div className='w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]'>
|
||||
<ArrowBottomD />
|
||||
</div>
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
فیلترها
|
||||
</p>
|
||||
<div className="w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]">
|
||||
<ArrowBottomD />
|
||||
</div>
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-full md:!min-w-[424px] !h-full md:!w-fit md:!h-fit"
|
||||
>
|
||||
<div className="flex justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
|
||||
<Button
|
||||
className="cursor-pointer !p-0 flex items-center justify-center gap-1"
|
||||
onClick={handleClose}
|
||||
variant="text"
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-full md:!min-w-[424px] !h-full md:!w-fit md:!h-fit"
|
||||
>
|
||||
<div
|
||||
className="flex justify-between w-full"
|
||||
>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
|
||||
<Button
|
||||
className="cursor-pointer !p-0 flex items-center justify-center gap-1"
|
||||
onClick={handleClose}
|
||||
variant="text"
|
||||
>
|
||||
<CloseOrangeModal />
|
||||
<p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="px-[24px] pb-[24px]">
|
||||
<p className="text-[#525252] mt-[32px] text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
|
||||
<div className="flex flex-col mt-[44px] mb-[56px] justify-center items-center gap-10">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateData}
|
||||
label='استان'
|
||||
list={states}
|
||||
name='first'
|
||||
/>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateData}
|
||||
list={cities}
|
||||
name='second'
|
||||
label='شهر'
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
className="flex !px-3 items-center justify-center gap-1 mr-auto"
|
||||
onClick={handleClose}
|
||||
>
|
||||
تایید و ادامه
|
||||
<ArrowLeftM />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
<CloseOrangeModal />
|
||||
<p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="px-[24px] pb-[24px]">
|
||||
<p className="text-[#525252] mt-[32px] text-[16px] font-medium text-center">
|
||||
شهر یا استان مورد نظر را انتخاب نمایید:
|
||||
</p>
|
||||
<div className="flex flex-col mt-[44px] mb-[56px] justify-center items-center gap-10">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateData}
|
||||
label="استان"
|
||||
list={states}
|
||||
name="first"
|
||||
/>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateData}
|
||||
list={cities}
|
||||
name="second"
|
||||
label="شهر"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
className="flex !px-3 items-center justify-center gap-1 mr-auto"
|
||||
onClick={handleClose}
|
||||
>
|
||||
تایید و ادامه
|
||||
<ArrowLeftM />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalSearchCity
|
||||
export default ModalSearchCity;
|
||||
|
||||
+19
-20
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -7,26 +7,25 @@ import SearchBar from "./head/SearchBar";
|
||||
import HeadPageList from "@/app/component/head";
|
||||
|
||||
function ClinicsPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HeadPageList
|
||||
title='لیست کلینیک ها و درمانگاه های تخصصی'
|
||||
detail='در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید'
|
||||
>
|
||||
<SearchBar />
|
||||
</HeadPageList>
|
||||
<List loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<HeadPageList
|
||||
title="لیست کلینیک ها و درمانگاه های تخصصی"
|
||||
detail="در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید"
|
||||
>
|
||||
<SearchBar />
|
||||
</HeadPageList>
|
||||
<List loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ClinicsPage
|
||||
export default ClinicsPage;
|
||||
|
||||
@@ -1,59 +1,62 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD"
|
||||
import ClockClinic from "@/components/icons/ClockClinic"
|
||||
import LocationClinic from "@/components/icons/LocationClinic"
|
||||
import { Button } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD";
|
||||
import ClockClinic from "@/components/icons/ClockClinic";
|
||||
import LocationClinic from "@/components/icons/LocationClinic";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function ItemClinic({ data, loading }) {
|
||||
return (
|
||||
<li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<CircularLoading loading={loading} width={60} height={60}>
|
||||
<Image
|
||||
width={60}
|
||||
height={60}
|
||||
src={data.img}
|
||||
alt="img clinic"
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-2">
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">{data.title}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{data.doctors} پزشک</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
|
||||
<div className="flex items-start justify-start gap-0.5">
|
||||
<LocationClinic />
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">{data.location}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-start justify-start gap-0.5 ml-[64px]">
|
||||
<ClockClinic />
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {data.hours_of_work}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<CircularLoading loading={loading} width={60} height={60}>
|
||||
<Image width={60} height={60} src={data.img} alt="img clinic" />
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-2">
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">{data.title}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
{data.doctors} پزشک
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
|
||||
<div className="flex items-start justify-start gap-0.5">
|
||||
<LocationClinic />
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
{data.location}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-start justify-start gap-0.5 ml-[64px]">
|
||||
<ClockClinic />
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
ساعت کاری: {data.hours_of_work}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow */}
|
||||
<Link href={loading ? '#' : `/clinic/${data.id}`}>
|
||||
<Button
|
||||
className={`${loading ? '!bg-[#E7E7E7]' : '!bg-[#5559CE]'} !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit`}
|
||||
disabled={loading}
|
||||
>
|
||||
<ArrowLeftD />
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
{/* Arrow */}
|
||||
<Link href={loading ? "#" : `/clinic/${data.id}`}>
|
||||
<Button
|
||||
className={`${
|
||||
loading ? "!bg-[#E7E7E7]" : "!bg-[#5559CE]"
|
||||
} !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit`}
|
||||
disabled={loading}
|
||||
>
|
||||
<ArrowLeftD />
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemClinic
|
||||
export default ItemClinic;
|
||||
|
||||
@@ -1,32 +1,27 @@
|
||||
import Pageguide from "@/app/component/Pageguide"
|
||||
import clinics from '@/data/clinics.json';
|
||||
import Pageguide from "@/app/component/Pageguide";
|
||||
import clinics from "@/data/clinics.json";
|
||||
import ItemClinic from "./ItemClinic";
|
||||
import Pagination from "@/app/component/Pagination";
|
||||
|
||||
function List({ loading }) {
|
||||
const listPage = ["کلینیک ها", "اهواز"];
|
||||
|
||||
const listPage = ['کلینیک ها', 'اهواز'];
|
||||
|
||||
return (
|
||||
<div className="padding-responsive pt-[20px]">
|
||||
<Pageguide
|
||||
list={listPage}
|
||||
/>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px]
|
||||
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6">
|
||||
{clinics.map(item => (
|
||||
<ItemClinic
|
||||
data={item}
|
||||
key={item.id}
|
||||
loading={loading}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className='mt-[48px] flex justify-center'>
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="padding-responsive pt-[20px]">
|
||||
<Pageguide list={listPage} />
|
||||
<ul
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px]
|
||||
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
|
||||
>
|
||||
{clinics.map((item) => (
|
||||
<ItemClinic data={item} key={item.id} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-[48px] flex justify-center">
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import CallC from "../icons/CallC";
|
||||
import EmailC from "../icons/EmailC";
|
||||
@@ -6,40 +6,39 @@ import WhatsappC from "../icons/WhatsappC";
|
||||
import ContentContact from "./ContentContact";
|
||||
|
||||
function Call() {
|
||||
// const openURL = url => window.open(url);
|
||||
|
||||
// const openURL = url => window.open(url);
|
||||
|
||||
return (
|
||||
<div data-aos="flip-left"
|
||||
className="lg:min-w-[calc(50%_+_70px)] bg-banner-about !bg-center !bg-no-repeat !bg-cover lg:pl-[18%] h-fit pt-[16px] sm:pt-[29px] md:pt-[42px] lg:pt-[55px]
|
||||
return (
|
||||
<div
|
||||
data-aos="flip-left"
|
||||
className="lg:min-w-[calc(50%_+_70px)] bg-banner-about !bg-center !bg-no-repeat !bg-cover lg:pl-[18%] h-fit pt-[16px] sm:pt-[29px] md:pt-[42px] lg:pt-[55px]
|
||||
bg-contact rounded-[8px] pb-[30px] sm:pb-[42px] md:pb-[55px]
|
||||
overflow-hidden lg:pb-[171px] px-[16px] sm:px-[27px] md:px-[39px] lg:px-[48px]">
|
||||
<p className="text-[#FAFAFA] text-[20px] font-bold">تماس با ما</p>
|
||||
<p
|
||||
className="text-[#FAFAFA] leading-[26px] text-[14px] md:text-[16px] font-normal mt-6"
|
||||
>سامانه نوبت 724 به مردم کمک می کند تا دسترسی آسان تر و سریع تری به خدمات پزشکی و درمانی داشته باشند.</p>
|
||||
<ul className="flex flex-col mt-[68px] justify-start items-start gap-[32px]">
|
||||
<ContentContact
|
||||
url='tel:900300400'
|
||||
text='تلفن تماس: ۰۲۱۳۶۳۵۴۵۹۸'
|
||||
>
|
||||
<CallC />
|
||||
</ContentContact>
|
||||
<ContentContact
|
||||
url='https://wa.me/09124568794'
|
||||
text='واتساپ: ۰۹۱۲۴۵۶۸۷۹۴'
|
||||
>
|
||||
<WhatsappC />
|
||||
</ContentContact>
|
||||
<ContentContact
|
||||
url='mailto:batome@gmail.com'
|
||||
text='ایمیل: batome@gmail.com'
|
||||
>
|
||||
<EmailC />
|
||||
</ContentContact>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
overflow-hidden lg:pb-[171px] px-[16px] sm:px-[27px] md:px-[39px] lg:px-[48px]"
|
||||
>
|
||||
<p className="text-[#FAFAFA] text-[20px] font-bold">تماس با ما</p>
|
||||
<p className="text-[#FAFAFA] leading-[26px] text-[14px] md:text-[16px] font-normal mt-6">
|
||||
سامانه نوبت 724 به مردم کمک می کند تا دسترسی آسان تر و سریع تری به خدمات
|
||||
پزشکی و درمانی داشته باشند.
|
||||
</p>
|
||||
<ul className="flex flex-col mt-[68px] justify-start items-start gap-[32px]">
|
||||
<ContentContact url="tel:900300400" text="تلفن تماس: ۰۲۱۳۶۳۵۴۵۹۸">
|
||||
<CallC />
|
||||
</ContentContact>
|
||||
<ContentContact
|
||||
url="https://wa.me/09124568794"
|
||||
text="واتساپ: ۰۹۱۲۴۵۶۸۷۹۴"
|
||||
>
|
||||
<WhatsappC />
|
||||
</ContentContact>
|
||||
<ContentContact
|
||||
url="mailto:batome@gmail.com"
|
||||
text="ایمیل: batome@gmail.com"
|
||||
>
|
||||
<EmailC />
|
||||
</ContentContact>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Call
|
||||
export default Call;
|
||||
|
||||
@@ -4,39 +4,43 @@ import FieldLabel from "./FieldLabel";
|
||||
import Field from "@/app/component/Field";
|
||||
|
||||
function Connect() {
|
||||
return (
|
||||
<div
|
||||
className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px]
|
||||
return (
|
||||
<div
|
||||
className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px]
|
||||
shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-[16px] lg:mt-0 p-[16px] sm:p-[21px] md:p-[27px]"
|
||||
>
|
||||
<div data-aos="zoom-in">
|
||||
<div className="flex flex-col justify-center items-center gap-[10px]">
|
||||
<p className="text-[#3B3B3B] text-[16px] font-bold">با ما در ارتباط باشید</p>
|
||||
<p className="text-[#525252] text-[14px] font-normal">نظرات و پیشنهادات خود را با ما در میان بگذارید.</p>
|
||||
</div>
|
||||
<div className="mt-[40px] flex flex-col gap-[20px]">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-[24px] sm:gap-[21px] md:gap-18px] lg:gap-[16px]">
|
||||
<FieldLabel title='نام و نام خانوادگی'>
|
||||
<Field title='احسان احمدی' type='text' />
|
||||
</FieldLabel>
|
||||
<FieldLabel title='شماره موبایل'>
|
||||
<Field title='09121056987' type='text' />
|
||||
</FieldLabel>
|
||||
</div>
|
||||
<div>
|
||||
<Field title='پیام شما...' type='text' multiline={true} />
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!mt-[40px] !py-[8px] md:!py-[9px] !px-[34px] !flex !items-center !gap-[4px] !mr-auto"
|
||||
>
|
||||
ارسال پیام
|
||||
<ArrowLeftC />
|
||||
</Button>
|
||||
</div>
|
||||
>
|
||||
<div data-aos="zoom-in">
|
||||
<div className="flex flex-col justify-center items-center gap-[10px]">
|
||||
<p className="text-[#3B3B3B] text-[16px] font-bold">
|
||||
با ما در ارتباط باشید
|
||||
</p>
|
||||
<p className="text-[#525252] text-[14px] font-normal">
|
||||
نظرات و پیشنهادات خود را با ما در میان بگذارید.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
<div className="mt-[40px] flex flex-col gap-[20px]">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-[24px] sm:gap-[21px] md:gap-18px] lg:gap-[16px]">
|
||||
<FieldLabel title="نام و نام خانوادگی">
|
||||
<Field title="احسان احمدی" type="text" />
|
||||
</FieldLabel>
|
||||
<FieldLabel title="شماره موبایل">
|
||||
<Field title="09121056987" type="text" />
|
||||
</FieldLabel>
|
||||
</div>
|
||||
<div>
|
||||
<Field title="پیام شما..." type="text" multiline={true} />
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!mt-[40px] !py-[8px] md:!py-[9px] !px-[34px] !flex !items-center !gap-[4px] !mr-auto"
|
||||
>
|
||||
ارسال پیام
|
||||
<ArrowLeftC />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Connect
|
||||
export default Connect;
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
function ContentContact({ text, children, url }) {
|
||||
const openURL = (url) => window.open(url);
|
||||
|
||||
const openURL = url => window.open(url);
|
||||
|
||||
return (
|
||||
<li
|
||||
className="flex cursor-pointer items-center justify-start gap-4"
|
||||
onClick={() => openURL(url)}
|
||||
>
|
||||
<div className="p-2 rounded-[8px] bg-[#EBFAFA] grid place-items-center">
|
||||
{children}
|
||||
</div>
|
||||
<p className="text-[#FFF] text-[14px] md:text-[18px] sm:text-[16px] lg:text-[20px] font-normal">{text}</p>
|
||||
</li>
|
||||
)
|
||||
return (
|
||||
<li
|
||||
className="flex cursor-pointer items-center justify-start gap-4"
|
||||
onClick={() => openURL(url)}
|
||||
>
|
||||
<div className="p-2 rounded-[8px] bg-[#EBFAFA] grid place-items-center">
|
||||
{children}
|
||||
</div>
|
||||
<p className="text-[#FFF] text-[14px] md:text-[18px] sm:text-[16px] lg:text-[20px] font-normal">
|
||||
{text}
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContentContact
|
||||
export default ContentContact;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
function FieldLabel({ children, title }) {
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start w-full gap-[12px] md:gap-[14px] lg:gap-[16px]">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start w-full gap-[12px] md:gap-[14px] lg:gap-[16px]">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FieldLabel
|
||||
export default FieldLabel;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import Call from "./Call"
|
||||
import Connect from "./Connect"
|
||||
import Call from "./Call";
|
||||
import Connect from "./Connect";
|
||||
|
||||
function ContactUsPage() {
|
||||
return (
|
||||
<div className="w-full pt-[24px] sm:pt-[56px] md:pt-[88px] lg:pt-[120px] mt-[56px] padding-responsive flex flex-col lg:flex-row items-center justify-between h-fit">
|
||||
<Call />
|
||||
<Connect />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full pt-[24px] sm:pt-[56px] md:pt-[88px] lg:pt-[120px] mt-[56px] padding-responsive flex flex-col lg:flex-row items-center justify-between h-fit">
|
||||
<Call />
|
||||
<Connect />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContactUsPage
|
||||
export default ContactUsPage;
|
||||
|
||||
@@ -1,23 +1,32 @@
|
||||
import Layout from '../layout'
|
||||
import Layout from "../layout";
|
||||
|
||||
function DashboardPage({ user, isTurnsDetails, setIsTurnsDetails, children, value, setValue, isOpenSide, setIsOpenSide }) {
|
||||
return (
|
||||
<Layout
|
||||
user={user}
|
||||
value={value}
|
||||
title='داشبورد'
|
||||
name='dashboard'
|
||||
isSidebar={true}
|
||||
setValue={setValue}
|
||||
disableFooter={true}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
>
|
||||
{children}
|
||||
</Layout>
|
||||
)
|
||||
function DashboardPage({
|
||||
user,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
children,
|
||||
value,
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
return (
|
||||
<Layout
|
||||
user={user}
|
||||
value={value}
|
||||
title="داشبورد"
|
||||
name="dashboard"
|
||||
isSidebar={true}
|
||||
setValue={setValue}
|
||||
disableFooter={true}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
>
|
||||
{children}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardPage
|
||||
export default DashboardPage;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -15,92 +15,117 @@ import { Button } from "@mui/material";
|
||||
import NotfoundDashboard from "./NotfoundDashboard";
|
||||
import DownloadD from "@/components/icons/DownloadD";
|
||||
|
||||
const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];
|
||||
const listTab = [
|
||||
"حساب کاربری",
|
||||
"نوبت های من",
|
||||
"تراکنش های من",
|
||||
"نظرات من",
|
||||
"پیام ها",
|
||||
];
|
||||
|
||||
function ContentTabs({ user, value, isTurnsDetails, setIsTurnsDetails, setValue, isOpenSide, setIsOpenSide }) {
|
||||
function ContentTabs({
|
||||
user,
|
||||
value,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
const components = [
|
||||
<DetailUser user={user} />,
|
||||
<Turns
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>,
|
||||
<Transactions user={user} loading={loading} />,
|
||||
<Comments user={user} loading={loading} />,
|
||||
<Messages user={user} loading={loading} />,
|
||||
<NotfoundDashboard />,
|
||||
];
|
||||
|
||||
|
||||
const components = [
|
||||
<DetailUser user={user} />,
|
||||
<Turns user={user} loading={loading} setIsTurnsDetails={setIsTurnsDetails} />,
|
||||
<Transactions user={user} loading={loading} />,
|
||||
<Comments user={user} loading={loading} />,
|
||||
<Messages user={user} loading={loading} />,
|
||||
<NotfoundDashboard />
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px]
|
||||
return (
|
||||
<div
|
||||
className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px]
|
||||
shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
||||
bg-transparent md:bg-[#FFF]"
|
||||
>
|
||||
<div className="w-full flex items-center justify-between">
|
||||
<Button
|
||||
className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
|
||||
onClick={() =>
|
||||
isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)
|
||||
}
|
||||
variant="text"
|
||||
>
|
||||
<div className="w-full flex items-center justify-between">
|
||||
<Button
|
||||
className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
|
||||
onClick={() => isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)}
|
||||
variant="text"
|
||||
>
|
||||
<ArrowRightD />
|
||||
<p className="text-[#525252] text-[14px] font-bold">{isTurnsDetails ? 'جزئیات نوبت ' : listTab[value]}</p>
|
||||
</Button>
|
||||
{value === 1 && isTurnsDetails ? (
|
||||
<Button
|
||||
className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
|
||||
variant="text"
|
||||
>
|
||||
<DownloadD />
|
||||
دانلود اطلاعات نوبت
|
||||
</Button>
|
||||
) : undefined}
|
||||
</div>
|
||||
{isTurnsDetails ?
|
||||
<IsTurnsDetails loading={loading} user={user} setIsTurnsDetails={setIsTurnsDetails} /> : (
|
||||
<>
|
||||
<div className='!hidden md:!flex !w-full'>
|
||||
<Tabs
|
||||
style={{
|
||||
'.MuiTabs-indicator': {
|
||||
height: '2px',
|
||||
borderRadius: '16px',
|
||||
background: '#5559CE',
|
||||
},
|
||||
'& .MuiTabs-scroller': {
|
||||
borderBottom: '1px solid #EFEFEF',
|
||||
},
|
||||
'& .MuiTabs-flexContainer': {
|
||||
paddingRight: '15px',
|
||||
paddingLeft: '15px',
|
||||
},
|
||||
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
|
||||
color: '#5559CE !important'
|
||||
},
|
||||
'& .MuiButtonBase-root.Mui-selected': {
|
||||
color: '#5559CE !important'
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
color='#5559CE'
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[24px] sm:mt-[28px] md:mt-[32px] px-0 md:px-[24px]">
|
||||
{components[value]}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
<ArrowRightD />
|
||||
<p className="text-[#525252] text-[14px] font-bold">
|
||||
{isTurnsDetails ? "جزئیات نوبت " : listTab[value]}
|
||||
</p>
|
||||
</Button>
|
||||
{value === 1 && isTurnsDetails ? (
|
||||
<Button
|
||||
className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
|
||||
variant="text"
|
||||
>
|
||||
<DownloadD />
|
||||
دانلود اطلاعات نوبت
|
||||
</Button>
|
||||
) : undefined}
|
||||
</div>
|
||||
{isTurnsDetails ? (
|
||||
<IsTurnsDetails
|
||||
loading={loading}
|
||||
user={user}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="!hidden md:!flex !w-full">
|
||||
<Tabs
|
||||
style={{
|
||||
".MuiTabs-indicator": {
|
||||
height: "2px",
|
||||
borderRadius: "16px",
|
||||
background: "#5559CE",
|
||||
},
|
||||
"& .MuiTabs-scroller": {
|
||||
borderBottom: "1px solid #EFEFEF",
|
||||
},
|
||||
"& .MuiTabs-flexContainer": {
|
||||
paddingRight: "15px",
|
||||
paddingLeft: "15px",
|
||||
},
|
||||
"& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
"& .MuiButtonBase-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
}}
|
||||
value={value}
|
||||
color="#5559CE"
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[24px] sm:mt-[28px] md:mt-[32px] px-0 md:px-[24px]">
|
||||
{components[value]}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContentTabs
|
||||
export default ContentTabs;
|
||||
|
||||
@@ -1,50 +1,69 @@
|
||||
import CalendarAdD from '@/components/icons/CalendarAdD'
|
||||
import CardTickD from '@/components/icons/CardTickD'
|
||||
import { Button } from '@mui/material'
|
||||
import Image from 'next/image'
|
||||
import CalendarAdD from "@/components/icons/CalendarAdD";
|
||||
import CardTickD from "@/components/icons/CardTickD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
|
||||
function Head({ user }) {
|
||||
return (
|
||||
<div className='hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]'>
|
||||
<div className='bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center'>
|
||||
<div className='flex w-full pl-[calc(5%+140px)] lg:pl-[calc(9%+171px)] flex-col justify-start items-start gap-[8px]'>
|
||||
<p className='text-[3B3B3B] text-[16px] font-bold'>{user.name} <span className='text-[#3B3B3B] text-[16px] font-normal'>عزیز!</span></p>
|
||||
<p className='text-[#616161] text-[12px] font-normal'>در این قسمت میتوانید اطلاعات حساب خود و نوبت های گرفته شده را مدیریت کنید. </p>
|
||||
<Button
|
||||
variant='contained'
|
||||
className='!bg-[#5559CE] !rounded-[4px] !py-[4px] !px-[8px] !text-[#EFEFEF] !text-[12px] !font-medium !leading-[22px]'
|
||||
>مشاهده اطلاعات</Button>
|
||||
</div>
|
||||
<Image
|
||||
className='w-[120px] lg:w-[140px] xl:w-[170px] xl:min-w-[170px] h-fit absolute bottom-0 left-[3%] md:left-[5%] lg:left-[9%]'
|
||||
src='/assets/images/male-doctor-head-dashboard.png'
|
||||
alt='doctor'
|
||||
height={175}
|
||||
width={171}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col md:flex-row lg:flex-col items-start justify-start gap-[12px]'>
|
||||
<div className='py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
|
||||
<div className='bg-[#5559CE] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]'>
|
||||
<CardTickD />
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[16px] font-medium'>{user.total_transactions} <span className='text-[12px]'>تومان</span></p>
|
||||
<p className='text-[#616161] text-nowrap text-[14px] font-normal'>مجموع تراکنش ها</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
|
||||
<div className='bg-[#FFC051] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]'>
|
||||
<CalendarAdD />
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[16px] font-medium'>{user.number_of_turns}</p>
|
||||
<p className='text-[#616161] text-nowrap text-[14px] font-normal'>تعداد نوبت های شما</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]">
|
||||
<div className="bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center">
|
||||
<div className="flex w-full pl-[calc(5%+140px)] lg:pl-[calc(9%+171px)] flex-col justify-start items-start gap-[8px]">
|
||||
<p className="text-[3B3B3B] text-[16px] font-bold">
|
||||
{user.name}{" "}
|
||||
<span className="text-[#3B3B3B] text-[16px] font-normal">
|
||||
عزیز!
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-[#616161] text-[12px] font-normal">
|
||||
در این قسمت میتوانید اطلاعات حساب خود و نوبت های گرفته شده را مدیریت
|
||||
کنید.{" "}
|
||||
</p>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!bg-[#5559CE] !rounded-[4px] !py-[4px] !px-[8px] !text-[#EFEFEF] !text-[12px] !font-medium !leading-[22px]"
|
||||
>
|
||||
مشاهده اطلاعات
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
<Image
|
||||
className="w-[120px] lg:w-[140px] xl:w-[170px] xl:min-w-[170px] h-fit absolute bottom-0 left-[3%] md:left-[5%] lg:left-[9%]"
|
||||
src="/assets/images/male-doctor-head-dashboard.png"
|
||||
alt="doctor"
|
||||
height={175}
|
||||
width={171}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row lg:flex-col items-start justify-start gap-[12px]">
|
||||
<div className="py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
||||
<div className="bg-[#5559CE] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]">
|
||||
<CardTickD />
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px] items-start justify-start">
|
||||
<p className="text-[#3B3B3B] text-nowrap text-[16px] font-medium">
|
||||
{user.total_transactions}{" "}
|
||||
<span className="text-[12px]">تومان</span>
|
||||
</p>
|
||||
<p className="text-[#616161] text-nowrap text-[14px] font-normal">
|
||||
مجموع تراکنش ها
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
||||
<div className="bg-[#FFC051] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]">
|
||||
<CalendarAdD />
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px] items-start justify-start">
|
||||
<p className="text-[#3B3B3B] text-nowrap text-[16px] font-medium">
|
||||
{user.number_of_turns}
|
||||
</p>
|
||||
<p className="text-[#616161] text-nowrap text-[14px] font-normal">
|
||||
تعداد نوبت های شما
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,35 +1,43 @@
|
||||
import NumberNotFound from "@/components/icons/NumberNotFound"
|
||||
import { Button } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
import NumberNotFound from "@/components/icons/NumberNotFound";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
|
||||
function NotfoundDashboard() {
|
||||
return (
|
||||
<div className='flex flex-col-reverse items-center justify-between gap-[50px]'>
|
||||
<div className='flex w-full md:w-fit flex-col justify-center items-center'>
|
||||
<div className='flex mt-[72px] md:hidden
|
||||
return (
|
||||
<div className="flex flex-col-reverse items-center justify-between gap-[50px]">
|
||||
<div className="flex w-full md:w-fit flex-col justify-center items-center">
|
||||
<div
|
||||
className="flex mt-[72px] md:hidden
|
||||
w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px]
|
||||
h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]'>
|
||||
<NumberNotFound />
|
||||
</div>
|
||||
<Image
|
||||
className=' mt-[24px]
|
||||
h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]"
|
||||
>
|
||||
<NumberNotFound />
|
||||
</div>
|
||||
<Image
|
||||
className=" mt-[24px]
|
||||
w-[200px] sm:w-[212px] md:w-[223px] lg:w-[235px]
|
||||
h-[200px] sm:h-[212px] md:h-[223px] lg:h-[235px]
|
||||
'
|
||||
src='/assets/images/notfound-cover.png'
|
||||
alt='notfound-cover'
|
||||
height={405}
|
||||
width={411}
|
||||
/>
|
||||
<p className='text-[#3B3B3B] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold mt-[24px] sm:mt-[30px] md:mt-[35px] lg:mt-[40px] mb-[12px] sm:mb-[16px] md:mb-[20px] lg:mb-[24px] text-center'>صفحه مورد نظر یافت نشد!</p>
|
||||
<p className='text-[#525252] text-[14px] md:text-[16px] font-normal text-center'>متاسفانه صفحه ای که به دنبال آن هستید وجود ندارد یا پاک شده است.</p>
|
||||
<Button
|
||||
className='!h-[43px] md:!h-[45px] lg:!h-[46px] !mt-[20px] sm:!mt-[29px] md:!mt-[39px] lg:!mt-[48px] !px-[12px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium'
|
||||
variant='contained'
|
||||
>بازگشت به صفحه اصلی</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
"
|
||||
src="/assets/images/notfound-cover.png"
|
||||
alt="notfound-cover"
|
||||
height={405}
|
||||
width={411}
|
||||
/>
|
||||
<p className="text-[#3B3B3B] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold mt-[24px] sm:mt-[30px] md:mt-[35px] lg:mt-[40px] mb-[12px] sm:mb-[16px] md:mb-[20px] lg:mb-[24px] text-center">
|
||||
صفحه مورد نظر یافت نشد!
|
||||
</p>
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-normal text-center">
|
||||
متاسفانه صفحه ای که به دنبال آن هستید وجود ندارد یا پاک شده است.
|
||||
</p>
|
||||
<Button
|
||||
className="!h-[43px] md:!h-[45px] lg:!h-[46px] !mt-[20px] sm:!mt-[29px] md:!mt-[39px] lg:!mt-[48px] !px-[12px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
بازگشت به صفحه اصلی
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NotfoundDashboard
|
||||
export default NotfoundDashboard;
|
||||
|
||||
@@ -1,28 +1,36 @@
|
||||
import ContentTabs from "./ContentTabs"
|
||||
import Head from "./Head"
|
||||
import NotfoundDashboard from "./NotfoundDashboard"
|
||||
import ContentTabs from "./ContentTabs";
|
||||
import Head from "./Head";
|
||||
import NotfoundDashboard from "./NotfoundDashboard";
|
||||
|
||||
function UserAccountPage({ user, isTurnsDetails, setIsTurnsDetails, value, setValue, isOpenSide, setIsOpenSide }) {
|
||||
return (
|
||||
<div className='w-full md:w-[68%] lg:w-[72%]'>
|
||||
{value === 5 ? (
|
||||
<NotfoundDashboard />
|
||||
) : (
|
||||
<>
|
||||
<Head user={user} />
|
||||
<ContentTabs
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
function UserAccountPage({
|
||||
user,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
value,
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
return (
|
||||
<div className="w-full md:w-[68%] lg:w-[72%]">
|
||||
{value === 5 ? (
|
||||
<NotfoundDashboard />
|
||||
) : (
|
||||
<>
|
||||
<Head user={user} />
|
||||
<ContentTabs
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserAccountPage
|
||||
export default UserAccountPage;
|
||||
|
||||
@@ -1,67 +1,73 @@
|
||||
import CalndarD from "@/components/icons/CalndarD"
|
||||
import { Rating } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
import ModalDeleteComment from "./modal"
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import CustomLoading from "@/app/component/loading/Custom"
|
||||
import MultilineLoading from "@/app/component/loading/Multiline"
|
||||
import CalndarD from "@/components/icons/CalndarD";
|
||||
import { Rating } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import ModalDeleteComment from "./modal";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import MultilineLoading from "@/app/component/loading/Multiline";
|
||||
|
||||
function Comment({ data, loading, idx, length }) {
|
||||
return (
|
||||
<li className="flex flex-col gap-[8px] w-full">
|
||||
<div className="flex items-start justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<CircularLoading loading={loading} width={87} height={87}>
|
||||
<Image
|
||||
className="w-[48px] sm:w-[61px] md:w-[75px] lg:w-[88px] h-[48px] sm:h-[61px] md:h-[75px] lg:h-[88px]"
|
||||
src={data.profile}
|
||||
alt="profile"
|
||||
height={87}
|
||||
width={87}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<TextLoading loading={loading} width={105} height={18}>
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">{data.name_doctor}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width={90} height={30}>
|
||||
<ModalDeleteComment />
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width={130} height={18}>
|
||||
<Rating
|
||||
defaultValue={data.stars.value}
|
||||
className="!mt-[4px] md:!mt-[6px] lg:!mt-[8px]"
|
||||
sx={{
|
||||
'& .MuiSvgIcon-root': {
|
||||
width: '16px',
|
||||
height: '16px'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</CustomLoading>
|
||||
<MultilineLoading loading={loading} width='full' height={18} line={2}>
|
||||
<p className="text-[#525252] mt-[4px] md:mt-[2px] lg:mt-0 text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">{data.comment}</p>
|
||||
</MultilineLoading>
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<div className="w-[20px] h-[20px] sm:w-[22px] sm:h-[22px] lg:w-[24px] lg:h-[24px]">
|
||||
<CalndarD />
|
||||
</div>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
{length > idx + 1 && (
|
||||
<span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] lg:mt-[8px]"></span>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
return (
|
||||
<li className="flex flex-col gap-[8px] w-full">
|
||||
<div className="flex items-start justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<CircularLoading loading={loading} width={87} height={87}>
|
||||
<Image
|
||||
className="w-[48px] sm:w-[61px] md:w-[75px] lg:w-[88px] h-[48px] sm:h-[61px] md:h-[75px] lg:h-[88px]"
|
||||
src={data.profile}
|
||||
alt="profile"
|
||||
height={87}
|
||||
width={87}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<TextLoading loading={loading} width={105} height={18}>
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">
|
||||
{data.name_doctor}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">
|
||||
تخصص: {data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width={90} height={30}>
|
||||
<ModalDeleteComment />
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width={130} height={18}>
|
||||
<Rating
|
||||
defaultValue={data.stars.value}
|
||||
className="!mt-[4px] md:!mt-[6px] lg:!mt-[8px]"
|
||||
sx={{
|
||||
"& .MuiSvgIcon-root": {
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CustomLoading>
|
||||
<MultilineLoading loading={loading} width="full" height={18} line={2}>
|
||||
<p className="text-[#525252] mt-[4px] md:mt-[2px] lg:mt-0 text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">
|
||||
{data.comment}
|
||||
</p>
|
||||
</MultilineLoading>
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<div className="w-[20px] h-[20px] sm:w-[22px] sm:h-[22px] lg:w-[24px] lg:h-[24px]">
|
||||
<CalndarD />
|
||||
</div>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
{length > idx + 1 && (
|
||||
<span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] lg:mt-[8px]"></span>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Comment
|
||||
export default Comment;
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import Comment from "./Comment"
|
||||
import Comment from "./Comment";
|
||||
|
||||
function Comments({ user, loading }) {
|
||||
return (
|
||||
<ul className="flex opacity-page flex-col items-start justify-start gap-[24px] md:gap-[22px] lg:gap-[20px]">
|
||||
{user.comments.map((item, idx) => (
|
||||
<Comment
|
||||
key={idx}
|
||||
idx={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
length={user.comments.length}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex opacity-page flex-col items-start justify-start gap-[24px] md:gap-[22px] lg:gap-[20px]">
|
||||
{user.comments.map((item, idx) => (
|
||||
<Comment
|
||||
key={idx}
|
||||
idx={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
length={user.comments.length}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Comments
|
||||
export default Comments;
|
||||
|
||||
@@ -1,67 +1,63 @@
|
||||
import { useState } from 'react';
|
||||
import TrashOrangeD from '@/components/icons/TrashOrangeD';
|
||||
import { Box, Button, Modal } from '@mui/material';
|
||||
import { styleDefault } from '@/mui';
|
||||
import CloseModalD from '@/components/icons/CloseModalD';
|
||||
import { useState } from "react";
|
||||
import TrashOrangeD from "@/components/icons/TrashOrangeD";
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
|
||||
function ModalDeleteComment() {
|
||||
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 (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className="!gap-[5px] !p-1 !text-[#F17732] !text-[12px] md:!text-[14px] !font-medium"
|
||||
onClick={handleOpen}
|
||||
variant="text"
|
||||
>
|
||||
<TrashOrangeD />
|
||||
حذف نظر
|
||||
return (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className="!gap-[5px] !p-1 !text-[#F17732] !text-[12px] md:!text-[14px] !font-medium"
|
||||
onClick={handleOpen}
|
||||
variant="text"
|
||||
>
|
||||
<TrashOrangeD />
|
||||
حذف نظر
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<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 onClick={handleClose} className="!p-1" variant="text">
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
|
||||
آیا این نظر حذف شود؟
|
||||
</p>
|
||||
<div className="flex items-center justify-end gap-[16px] mt-[12px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium"
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<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
|
||||
onClick={handleClose}
|
||||
className='!p-1'
|
||||
variant='text'
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
|
||||
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا این نظر حذف شود؟</p>
|
||||
<div className='flex items-center justify-end gap-[16px] mt-[12px]'>
|
||||
<Button
|
||||
variant='outlined'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant='contained'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
|
||||
>
|
||||
حذف نظر
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
>
|
||||
حذف نظر
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalDeleteComment
|
||||
export default ModalDeleteComment;
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
function Content({ isConfirmed, children, title }) {
|
||||
return (
|
||||
<div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
|
||||
<div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className='py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF]
|
||||
text-[10px] md:text-[12px] font-normal h-[26px] grid place-items-center'
|
||||
>تایید شده</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
|
||||
<div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className="py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF]
|
||||
text-[10px] md:text-[12px] font-normal h-[26px] grid place-items-center"
|
||||
>
|
||||
تایید شده
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content
|
||||
export default Content;
|
||||
|
||||
@@ -1,70 +1,69 @@
|
||||
import CalendarEdit from '@/components/icons/CalendarEdit';
|
||||
import { convertToJalali } from '@/helper';
|
||||
import { Button, Popover } from '@mui/material'
|
||||
import { DatePicker } from 'jalaali-react-date-picker'
|
||||
import React, { useState } from 'react'
|
||||
import CalendarEdit from "@/components/icons/CalendarEdit";
|
||||
import { convertToJalali } from "@/helper";
|
||||
import { Button, Popover } from "@mui/material";
|
||||
import { DatePicker } from "jalaali-react-date-picker";
|
||||
import React, { useState } from "react";
|
||||
|
||||
function DateBirthday({ data, changeData }) {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
const open = Boolean(anchorEl);
|
||||
const id = open ? "simple-popover" : undefined;
|
||||
|
||||
const open = Boolean(anchorEl);
|
||||
const id = open ? 'simple-popover' : undefined;
|
||||
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<div
|
||||
className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-normal cursor-pointer'>{data.value}</p>
|
||||
<Button
|
||||
className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
|
||||
>
|
||||
<CalendarEdit />
|
||||
</Button>
|
||||
</div>
|
||||
<Popover
|
||||
id={id}
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiPaper-root': {
|
||||
padding: '12px',
|
||||
background: '#FAFAFA !important',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #E9ECEF',
|
||||
boxShadow: '0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DatePicker
|
||||
locale='fa'
|
||||
onChange={e => {
|
||||
changeData(convertToJalali(e._d), 'value', 'date_of_birth');
|
||||
handleClose();
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div
|
||||
className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal cursor-pointer">
|
||||
{data.value}
|
||||
</p>
|
||||
<Button className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1">
|
||||
<CalendarEdit />
|
||||
</Button>
|
||||
</div>
|
||||
<Popover
|
||||
id={id}
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiPaper-root": {
|
||||
padding: "12px",
|
||||
background: "#FAFAFA !important",
|
||||
borderRadius: "16px",
|
||||
border: "1px solid #E9ECEF",
|
||||
boxShadow: "0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DatePicker
|
||||
locale="fa"
|
||||
onChange={(e) => {
|
||||
changeData(convertToJalali(e._d), "value", "date_of_birth");
|
||||
handleClose();
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DateBirthday
|
||||
export default DateBirthday;
|
||||
|
||||
@@ -1,86 +1,139 @@
|
||||
import Content from './Content'
|
||||
import EditField from '@/app/component/EditField'
|
||||
import AutoCompleteSelect from '@/app/component/element/AutoCompleteSelect'
|
||||
import DateBirthday from './DateBirthday'
|
||||
import { insurance, gender, blood_group, marital_status, education, job } from "./listSelector";
|
||||
import Content from "./Content";
|
||||
import EditField from "@/app/component/EditField";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import DateBirthday from "./DateBirthday";
|
||||
import {
|
||||
insurance,
|
||||
gender,
|
||||
blood_group,
|
||||
marital_status,
|
||||
education,
|
||||
job,
|
||||
} from "./listSelector";
|
||||
|
||||
function Form({ data, selected, changeData, updateSelect }) {
|
||||
return (
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-[24px]'>
|
||||
<Content title='شماره موبایل' isConfirmed={true}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
|
||||
</Content>
|
||||
<Content title='کد ملی' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
|
||||
</Content>
|
||||
<Content title='نام و نام خانوادگی' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
|
||||
</Content>
|
||||
<Content title='جنسیت'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='جنسیت'
|
||||
name='gender'
|
||||
list={gender}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='تاریخ تولد'>
|
||||
<DateBirthday data={data?.date_of_birth} isConfirmed={false} changeData={changeData} />
|
||||
</Content>
|
||||
<Content title='نام پدر' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.father_name} name='father_name' />
|
||||
</Content>
|
||||
<Content title='نوع بیمه'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='نوع بیمه'
|
||||
name='insurance'
|
||||
list={insurance}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='شماره بیمه' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.insurance_number} name='insurance_number' />
|
||||
</Content>
|
||||
<Content title='گروه خونی'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='گروه خونی'
|
||||
name='blood_group'
|
||||
list={blood_group}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='وضعیت تاهل'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='وضعیت تاهل'
|
||||
name='marital_status'
|
||||
list={marital_status}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='تلفن منزل' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.home_phone} name='home_phone' />
|
||||
</Content>
|
||||
<Content title='تحصیلات'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='تحصیلات'
|
||||
name='education'
|
||||
list={education}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='شغل'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='شغل'
|
||||
name='job'
|
||||
list={job}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='تلفن محل کار' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.work_phone} name='work_phone' />
|
||||
</Content>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
|
||||
<Content title="شماره موبایل" isConfirmed={true}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.phone}
|
||||
name="phone"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="کد ملی" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.national_code}
|
||||
name="national_code"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نام و نام خانوادگی" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.name}
|
||||
name="name"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="جنسیت">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="جنسیت"
|
||||
name="gender"
|
||||
list={gender}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تاریخ تولد">
|
||||
<DateBirthday
|
||||
data={data?.date_of_birth}
|
||||
isConfirmed={false}
|
||||
changeData={changeData}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نام پدر" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.father_name}
|
||||
name="father_name"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نوع بیمه">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="نوع بیمه"
|
||||
name="insurance"
|
||||
list={insurance}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="شماره بیمه" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.insurance_number}
|
||||
name="insurance_number"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="گروه خونی">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="گروه خونی"
|
||||
name="blood_group"
|
||||
list={blood_group}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="وضعیت تاهل">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="وضعیت تاهل"
|
||||
name="marital_status"
|
||||
list={marital_status}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تلفن منزل" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.home_phone}
|
||||
name="home_phone"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تحصیلات">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="تحصیلات"
|
||||
name="education"
|
||||
list={education}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="شغل">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="شغل"
|
||||
name="job"
|
||||
list={job}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تلفن محل کار" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.work_phone}
|
||||
name="work_phone"
|
||||
/>
|
||||
</Content>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -4,55 +4,55 @@ import { Button } from "@mui/material";
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
||||
|
||||
function DetailUser({ user }) {
|
||||
const [data, setData] = useState({
|
||||
phone: { value: user.phone, isEdit: false },
|
||||
national_code: { value: user.national_code, isEdit: false },
|
||||
name: { value: user.name, isEdit: false },
|
||||
date_of_birth: { value: user.date_of_birth, isEdit: false },
|
||||
father_name: { value: user.father_name, isEdit: false },
|
||||
insurance_number: { value: user.insurance_number, isEdit: false },
|
||||
home_phone: { value: user.home_phone, isEdit: false },
|
||||
work_phone: { value: user.work_phone, isEdit: false },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
gender: "",
|
||||
blood_group: "",
|
||||
insurance: "",
|
||||
marital_status: "",
|
||||
education: "",
|
||||
job: "",
|
||||
});
|
||||
|
||||
const [data, setData] = useState({
|
||||
phone: { value: user.phone, isEdit: false },
|
||||
national_code: { value: user.national_code, isEdit: false },
|
||||
name: { value: user.name, isEdit: false },
|
||||
date_of_birth: { value: user.date_of_birth, isEdit: false },
|
||||
father_name: { value: user.father_name, isEdit: false },
|
||||
insurance_number: { value: user.insurance_number, isEdit: false },
|
||||
home_phone: { value: user.home_phone, isEdit: false },
|
||||
work_phone: { value: user.work_phone, isEdit: false },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
gender: '',
|
||||
blood_group: '',
|
||||
insurance: '',
|
||||
marital_status: '',
|
||||
education: '',
|
||||
job: '',
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value,
|
||||
},
|
||||
});
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value
|
||||
}
|
||||
});
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form
|
||||
data={data}
|
||||
selected={selected}
|
||||
changeData={changeData}
|
||||
updateSelect={updateSelect}
|
||||
/>
|
||||
<Button
|
||||
className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form
|
||||
data={data}
|
||||
selected={selected}
|
||||
changeData={changeData}
|
||||
updateSelect={updateSelect}
|
||||
/>
|
||||
<Button
|
||||
className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
!bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
|
||||
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailUser
|
||||
export default DetailUser;
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
export const gender = [
|
||||
{ label: 'مرد', id: 10 },
|
||||
{ label: 'زن', id: 20 }
|
||||
{ label: "مرد", id: 10 },
|
||||
{ label: "زن", id: 20 },
|
||||
];
|
||||
|
||||
export const blood_group = [
|
||||
{ label: 'A+', id: 10 },
|
||||
{ label: 'B+', id: 20 },
|
||||
{ label: 'AB', id: 30 },
|
||||
{ label: 'O+', id: 40 }
|
||||
{ label: "A+", id: 10 },
|
||||
{ label: "B+", id: 20 },
|
||||
{ label: "AB", id: 30 },
|
||||
{ label: "O+", id: 40 },
|
||||
];
|
||||
|
||||
export const marital_status = [
|
||||
{ label: 'متاهل', id: 10 },
|
||||
{ label: 'مجرد', id: 20 }
|
||||
]
|
||||
{ label: "متاهل", id: 10 },
|
||||
{ label: "مجرد", id: 20 },
|
||||
];
|
||||
|
||||
export const education = [
|
||||
{ label: 'دیپلم', id: 10 },
|
||||
{ label: 'فوق دیپلم', id: 20 },
|
||||
{ label: 'لیسانس', id: 30 },
|
||||
{ label: 'کارشناسی ارشد', id: 40 }
|
||||
]
|
||||
{ label: "دیپلم", id: 10 },
|
||||
{ label: "فوق دیپلم", id: 20 },
|
||||
{ label: "لیسانس", id: 30 },
|
||||
{ label: "کارشناسی ارشد", id: 40 },
|
||||
];
|
||||
|
||||
export const job = [
|
||||
{ label: 'آزاد', id: 10 },
|
||||
{ label: 'دولتی', id: 20 },
|
||||
]
|
||||
{ label: "آزاد", id: 10 },
|
||||
{ label: "دولتی", id: 20 },
|
||||
];
|
||||
|
||||
export const insurance = [
|
||||
{ label: 'بیمه 1', id: 10 },
|
||||
{ label: 'بیمه 2', id: 20 },
|
||||
{ label: 'بیمه 3', id: 30 }
|
||||
];
|
||||
{ label: "بیمه 1", id: 10 },
|
||||
{ label: "بیمه 2", id: 20 },
|
||||
{ label: "بیمه 3", id: 30 },
|
||||
];
|
||||
|
||||
@@ -1,38 +1,44 @@
|
||||
import MultilineLoading from '@/app/component/loading/Multiline'
|
||||
import TextLoading from '@/app/component/loading/Text'
|
||||
import CalndarD from '@/components/icons/CalndarD'
|
||||
import MessageNotifd from '@/components/icons/MessageNotifD'
|
||||
import React from 'react'
|
||||
import MultilineLoading from "@/app/component/loading/Multiline";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CalndarD from "@/components/icons/CalndarD";
|
||||
import MessageNotifd from "@/components/icons/MessageNotifD";
|
||||
import React from "react";
|
||||
|
||||
function Message({ data, loading, length, idx }) {
|
||||
return (
|
||||
<li>
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<div className="p-[6px] rounded-full bg-[#F17732]">
|
||||
<MessageNotifd />
|
||||
</div>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">عنوان پیام</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className='mr-0 lg:mr-[41px]'>
|
||||
<MultilineLoading width='full' height={18} loading={loading} line={2}>
|
||||
<p className='text-[#525252] text-[12px] md:text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]'>{data.text}</p>
|
||||
</MultilineLoading>
|
||||
<div className='flex items-center justify-start gap-[8px] mt-[8px] md:mt-[10px] lg:mt-[12px]'>
|
||||
<div className='max-w-[20px] max-h-[20px] md:max-w-[22px] md:max-h-[22px] lg:max-w-[24px] lg:max-h-[24px]'>
|
||||
<CalndarD />
|
||||
</div>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className='text-[#7E7E7E] text-[12px] font-normal'>{data.date}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
{length > idx + 1 && (
|
||||
<span className='block bg-[#EFEFEF] h-px w-full mt-[12px]'></span>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
return (
|
||||
<li>
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<div className="p-[6px] rounded-full bg-[#F17732]">
|
||||
<MessageNotifd />
|
||||
</div>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">
|
||||
عنوان پیام
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="mr-0 lg:mr-[41px]">
|
||||
<MultilineLoading width="full" height={18} loading={loading} line={2}>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">
|
||||
{data.text}
|
||||
</p>
|
||||
</MultilineLoading>
|
||||
<div className="flex items-center justify-start gap-[8px] mt-[8px] md:mt-[10px] lg:mt-[12px]">
|
||||
<div className="max-w-[20px] max-h-[20px] md:max-w-[22px] md:max-h-[22px] lg:max-w-[24px] lg:max-h-[24px]">
|
||||
<CalndarD />
|
||||
</div>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
{length > idx + 1 && (
|
||||
<span className="block bg-[#EFEFEF] h-px w-full mt-[12px]"></span>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Message
|
||||
export default Message;
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import Message from "./Message";
|
||||
|
||||
function Messages({ user, loading }) {
|
||||
return (
|
||||
<ul className="flex opacity-page flex-col gap-[24px] md:gap-[20px] lg:gap-[16px]">
|
||||
{user.messages.map((item, idx) => (
|
||||
<Message
|
||||
key={idx}
|
||||
idx={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
length={user.messages.length}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex opacity-page flex-col gap-[24px] md:gap-[20px] lg:gap-[16px]">
|
||||
{user.messages.map((item, idx) => (
|
||||
<Message
|
||||
key={idx}
|
||||
idx={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
length={user.messages.length}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Messages
|
||||
export default Messages;
|
||||
|
||||
@@ -1,77 +1,92 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import Image from "next/image"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import Image from "next/image";
|
||||
|
||||
function Card({ data, loading }) {
|
||||
return (
|
||||
<li className="p-[12px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] bg-[#FFF] rounded-[8px]">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={data.image}
|
||||
alt="profile"
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<TextLoading loading={loading} width={95} height={25}>
|
||||
<div
|
||||
className={`
|
||||
return (
|
||||
<li className="p-[12px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] bg-[#FFF] rounded-[8px]">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image src={data.image} alt="profile" height={32} width={32} />
|
||||
</CircularLoading>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<TextLoading loading={loading} width={95} height={25}>
|
||||
<div
|
||||
className={`
|
||||
w-[100px] p-[4px] rounded-[4px] text-center text-[14px] font-medium cursor-pointer select-none
|
||||
${data.status === 'success' ? 'bg-[#E8FADD] text-[#75E22E]' :
|
||||
data.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
|
||||
${
|
||||
data.status === "success"
|
||||
? "bg-[#E8FADD] text-[#75E22E]"
|
||||
: data.status === "pending"
|
||||
? "bg-[#FFF3DD] text-[#FDBA35]"
|
||||
: "bg-[#FFE3E2] text-[#FF5450]"
|
||||
}
|
||||
`}
|
||||
variant='text'
|
||||
>
|
||||
{data.status === 'success' ? 'پرداخت شده' :
|
||||
data.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
|
||||
</div>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ul className="flex flex-col mt-[16px]">
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">شناسه:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.id}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.date}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.time}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">مبلغ پیش پرداخت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={40} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.amount} تومان</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
variant="text"
|
||||
>
|
||||
{data.status === "success"
|
||||
? "پرداخت شده"
|
||||
: data.status === "pending"
|
||||
? "در انتظار"
|
||||
: "پرداخت نشده"}
|
||||
</div>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ul className="flex flex-col mt-[16px]">
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">شناسه:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.id}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
)
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
تاریخ نوبت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
مبلغ پیش پرداخت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={40} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.amount} تومان
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Card
|
||||
export default Card;
|
||||
|
||||
@@ -7,92 +7,116 @@ import CustomLoading from "@/app/component/loading/Custom";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
|
||||
function List({ user, loading }) {
|
||||
const tableHead = [
|
||||
"ردیف",
|
||||
"شناسه",
|
||||
"نام پزشک",
|
||||
"تاریخ",
|
||||
"ساعت",
|
||||
"مبلغ (تومان)",
|
||||
"وضعیت",
|
||||
];
|
||||
const centerTable = [0, 4, 5];
|
||||
|
||||
const tableHead = ['ردیف', 'شناسه', 'نام پزشک', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'وضعیت']
|
||||
const centerTable = [0, 4, 5];
|
||||
|
||||
return (
|
||||
<div className='!mt-[32px]'>
|
||||
<div className="hidden md:block w-full">
|
||||
<CustomTable
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={30} height={18} loading={loading}>
|
||||
{row.id}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<div
|
||||
className={`
|
||||
w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium cursor-pointer select-none
|
||||
${row.status === 'success' ? 'bg-[#E8FADD] text-[#75E22E]' :
|
||||
row.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
|
||||
`}
|
||||
variant='text'
|
||||
>
|
||||
{row.status === 'success' ? 'پرداخت شده' :
|
||||
row.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
|
||||
</div>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className="flex md:hidden flex-col gap-y-[24px]">
|
||||
{user.turns.map((row, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={row}
|
||||
loading={loading}
|
||||
return (
|
||||
<div className="!mt-[32px]">
|
||||
<div className="hidden md:block w-full">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB]"
|
||||
>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={30} height={18} loading={loading}>
|
||||
{row.id}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] !text-nowrap"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<div className="flex items-center justify-start gap-[8px] !text-nowrap">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt="doctor"
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<div
|
||||
className={`
|
||||
w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium cursor-pointer select-none
|
||||
${
|
||||
row.status === "success"
|
||||
? "bg-[#E8FADD] text-[#75E22E]"
|
||||
: row.status === "pending"
|
||||
? "bg-[#FFF3DD] text-[#FDBA35]"
|
||||
: "bg-[#FFE3E2] text-[#FF5450]"
|
||||
}
|
||||
`}
|
||||
variant="text"
|
||||
>
|
||||
{row.status === "success"
|
||||
? "پرداخت شده"
|
||||
: row.status === "pending"
|
||||
? "در انتظار"
|
||||
: "پرداخت نشده"}
|
||||
</div>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className="flex md:hidden flex-col gap-y-[24px]">
|
||||
{user.turns.map((row, idx) => (
|
||||
<Card key={idx} data={row} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import List from "./List";
|
||||
|
||||
function Transactions({ user, loading }) {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:block text-[16px] font-bold">تاریخچه تراکنش ها</p>
|
||||
<List user={user} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:block text-[16px] font-bold">
|
||||
تاریخچه تراکنش ها
|
||||
</p>
|
||||
<List user={user} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Transactions
|
||||
export default Transactions;
|
||||
|
||||
@@ -1,67 +1,72 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD"
|
||||
import { Button } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
|
||||
function Card({ data, loading, setIsTurnsDetails }) {
|
||||
return (
|
||||
<li
|
||||
className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]"
|
||||
>
|
||||
<div className="flex items-center justify-start gap-[8px] p-[12px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
width={32}
|
||||
height={32}
|
||||
alt="profile"
|
||||
src={data.image}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px]">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={50} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={75} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{data.date}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{data.time}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-[12px] flex items-center justify-between px-[12px]">
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">مبلغ پیش پرداخت: {data.amount} تومان</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={25}>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant="text"
|
||||
>
|
||||
مشاهده
|
||||
<ArrowLeftCardD />
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</div>
|
||||
return (
|
||||
<li className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]">
|
||||
<div className="flex items-center justify-start gap-[8px] p-[12px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image width={32} height={32} alt="profile" src={data.image} />
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px]">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={50} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
{data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={75} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
تاریخ نوبت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
)
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">
|
||||
{data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-[12px] flex items-center justify-between px-[12px]">
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
مبلغ پیش پرداخت: {data.amount} تومان
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={25}>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant="text"
|
||||
>
|
||||
مشاهده
|
||||
<ArrowLeftCardD />
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Card
|
||||
export default Card;
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
import Tabs from '@/app/component/Tabs';
|
||||
import { Button } from '@mui/material'
|
||||
import Tabs from "@/app/component/Tabs";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
const listTab = ['نوبت های جاری', 'نوبت های انجام شده'];
|
||||
const listTab = ["نوبت های جاری", "نوبت های انجام شده"];
|
||||
|
||||
function Head({ value, setValue, handleChange }) {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
|
||||
<div className='block w-full lg:hidden'>
|
||||
<Tabs
|
||||
style={{
|
||||
'.MuiTabs-indicator': {
|
||||
height: '2px',
|
||||
borderRadius: '16px',
|
||||
background: '#5559CE',
|
||||
},
|
||||
'& .MuiButtonBase-root': {
|
||||
color: '#7E7E7E',
|
||||
fontSize: '14px',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '700'
|
||||
},
|
||||
'& .MuiTabs-flexContainer': {
|
||||
paddingRight: '15px',
|
||||
paddingLeft: '15px',
|
||||
},
|
||||
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
|
||||
color: '#5559CE !important'
|
||||
},
|
||||
'& .MuiButtonBase-root.Mui-selected': {
|
||||
color: '#5559CE !important'
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
color='#5559CE'
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium'
|
||||
variant='contained'
|
||||
>
|
||||
نوبت های جاری
|
||||
</Button>
|
||||
<Button
|
||||
className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium'
|
||||
variant='outlined'
|
||||
>
|
||||
نوبت های انجام شده
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
|
||||
<div className="block w-full lg:hidden">
|
||||
<Tabs
|
||||
style={{
|
||||
".MuiTabs-indicator": {
|
||||
height: "2px",
|
||||
borderRadius: "16px",
|
||||
background: "#5559CE",
|
||||
},
|
||||
"& .MuiButtonBase-root": {
|
||||
color: "#7E7E7E",
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "700",
|
||||
},
|
||||
"& .MuiTabs-flexContainer": {
|
||||
paddingRight: "15px",
|
||||
paddingLeft: "15px",
|
||||
},
|
||||
"& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
"& .MuiButtonBase-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
}}
|
||||
value={value}
|
||||
color="#5559CE"
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
نوبت های جاری
|
||||
</Button>
|
||||
<Button
|
||||
className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium"
|
||||
variant="outlined"
|
||||
>
|
||||
نوبت های انجام شده
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,97 +1,117 @@
|
||||
import CustomTable from '@/app/component/CustomTable';
|
||||
import ArrowLeftBlueD from '@/components/icons/ArrowLeftBlueD'
|
||||
import { Button, TableCell, TableRow } from '@mui/material'
|
||||
import Image from 'next/image'
|
||||
import Card from './Card';
|
||||
import CircularLoading from '@/app/component/loading/Circular';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import CustomLoading from '@/app/component/loading/Custom';
|
||||
import CustomTable from "@/app/component/CustomTable";
|
||||
import ArrowLeftBlueD from "@/components/icons/ArrowLeftBlueD";
|
||||
import { Button, TableCell, TableRow } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import Card from "./Card";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
|
||||
function List({ user, loading, setIsTurnsDetails }) {
|
||||
const tableHead = [
|
||||
"ردیف",
|
||||
"نام پزشک",
|
||||
"تخصص",
|
||||
"تاریخ",
|
||||
"ساعت",
|
||||
"مبلغ (تومان)",
|
||||
"عملیات",
|
||||
];
|
||||
const centerTable = [0, 5];
|
||||
|
||||
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'عملیات']
|
||||
const centerTable = [0, 5];
|
||||
|
||||
return (
|
||||
<div className='!mt-[24px]'>
|
||||
<div className='hidden lg:block'>
|
||||
<CustomTable
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<Button
|
||||
className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant='text'
|
||||
>
|
||||
مشاهده جزئیات
|
||||
<ArrowLeftBlueD />
|
||||
</Button>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className='flex flex-col lg:hidden gap-[24px]'>
|
||||
{user.turns.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
return (
|
||||
<div className="!mt-[24px]">
|
||||
<div className="hidden lg:block">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB]"
|
||||
>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] !text-nowrap"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<div className="flex items-center justify-start gap-[8px] !text-nowrap">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt="doctor"
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]"
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant="text"
|
||||
>
|
||||
مشاهده جزئیات
|
||||
<ArrowLeftBlueD />
|
||||
</Button>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className="flex flex-col lg:hidden gap-[24px]">
|
||||
{user.turns.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -3,21 +3,22 @@ import Head from "./Head";
|
||||
import List from "./List";
|
||||
|
||||
function Turns({ user, setIsTurnsDetails, loading }) {
|
||||
const [value, setValue] = useState(0);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:flex text-[16px] font-bold">تاریخچه نوبت ها</p>
|
||||
<Head
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<List user={user} loading={loading} setIsTurnsDetails={setIsTurnsDetails} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:flex text-[16px] font-bold">
|
||||
تاریخچه نوبت ها
|
||||
</p>
|
||||
<Head value={value} setValue={setValue} handleChange={handleChange} />
|
||||
<List
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Turns
|
||||
export default Turns;
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import { Button } from "@mui/material"
|
||||
import ModalDeleteComment from "./modal"
|
||||
import EditTurnsD from "@/components/icons/EditTurnsD"
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD"
|
||||
import { Button } from "@mui/material";
|
||||
import ModalDeleteComment from "./modal";
|
||||
import EditTurnsD from "@/components/icons/EditTurnsD";
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD";
|
||||
|
||||
function ButtonData({ loading }) {
|
||||
return (
|
||||
<div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<ModalDeleteComment loading={loading} />
|
||||
<Button
|
||||
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
|
||||
disabled={loading}
|
||||
variant="contained"
|
||||
>
|
||||
<EditTurnsD />
|
||||
ویرایش نوبت
|
||||
<div className="mr-[4px]">
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
</Button>
|
||||
return (
|
||||
<div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<ModalDeleteComment loading={loading} />
|
||||
<Button
|
||||
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
|
||||
disabled={loading}
|
||||
variant="contained"
|
||||
>
|
||||
<EditTurnsD />
|
||||
ویرایش نوبت
|
||||
<div className="mr-[4px]">
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
)
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ButtonData
|
||||
export default ButtonData;
|
||||
|
||||
@@ -1,97 +1,126 @@
|
||||
import CircularLoading from '@/app/component/loading/Circular';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import CalendarD from '@/components/icons/CalendarD';
|
||||
import CallD from '@/components/icons/CallD';
|
||||
import ClockClinic from '@/components/icons/ClockClinic';
|
||||
import DownloadD from '@/components/icons/DownloadD';
|
||||
import LocationClinic from '@/components/icons/LocationClinic';
|
||||
import RoutingC from '@/components/icons/RoutingC';
|
||||
import TicketD from '@/components/icons/TicketD';
|
||||
import { Button } from '@mui/material';
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CalendarD from "@/components/icons/CalendarD";
|
||||
import CallD from "@/components/icons/CallD";
|
||||
import ClockClinic from "@/components/icons/ClockClinic";
|
||||
import DownloadD from "@/components/icons/DownloadD";
|
||||
import LocationClinic from "@/components/icons/LocationClinic";
|
||||
import RoutingC from "@/components/icons/RoutingC";
|
||||
import TicketD from "@/components/icons/TicketD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
function DetailLg({ user, loading }) {
|
||||
const data = user.turns[1];
|
||||
|
||||
const data = user.turns[1];
|
||||
|
||||
return (
|
||||
<div className='lg:mt-[18px] hidden md:block'>
|
||||
<div className='flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]'>
|
||||
<CircularLoading width={95} height={95} loading={loading}>
|
||||
<Image
|
||||
width={95}
|
||||
height={95}
|
||||
alt='profile'
|
||||
src={data.image}
|
||||
className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className='flex flex-col items-start justify-center gap-[20px]'>
|
||||
<TextLoading loading={loading} width={70} height={18}>
|
||||
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className='flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
|
||||
<li className='flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]'>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className='flex items-start justify-start gap-[4px]'>
|
||||
<CalendarD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className='flex items-start justify-start gap-[4px]'>
|
||||
<ClockClinic />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<li className='flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]'>
|
||||
<TextLoading loading={loading} width={250} height={20}>
|
||||
<div className='flex items-start justify-start gap-[4px]'>
|
||||
<LocationClinic />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={120} height={30}>
|
||||
<Button
|
||||
className='!py-[8px] !px-[12px] !gap-[8px]'
|
||||
variant='text'
|
||||
>
|
||||
<RoutingC />
|
||||
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<li className='flex items-center justify-start gap-[4px]'>
|
||||
<CallD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
|
||||
</li>
|
||||
</TextLoading>
|
||||
</ul>
|
||||
<div className='flex items-center gap-[4px] w-fit'>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<TicketD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<Button
|
||||
className='!px-[12px] !hidden md:!flex !mt-[24px] !py-[8px] !border !border-solid !border-[#D7D7D7] !rounded-[4px] !w-fit !items-center !justify-center !gap-[4px]'
|
||||
variant='outlined'
|
||||
>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<DownloadD />
|
||||
<p className='text-[#616161] text-[16px] font-medium'>دانلود اطلاعات نوبت</p>
|
||||
</TextLoading>
|
||||
</Button>
|
||||
return (
|
||||
<div className="lg:mt-[18px] hidden md:block">
|
||||
<div className="flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<CircularLoading width={95} height={95} loading={loading}>
|
||||
<Image
|
||||
width={95}
|
||||
height={95}
|
||||
alt="profile"
|
||||
src={data.image}
|
||||
className="w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]"
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[20px]">
|
||||
<TextLoading loading={loading} width={70} height={18}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium">
|
||||
تخصص: {data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
<ul className="flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start">
|
||||
<li className="flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]">
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className="flex items-start justify-start gap-[4px]">
|
||||
<CalendarD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
تاریخ نوبت:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
{data.date_turn}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className="flex items-start justify-start gap-[4px]">
|
||||
<ClockClinic />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
زمان نوبت:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
ساعت {data.time}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<li className="flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]">
|
||||
<TextLoading loading={loading} width={250} height={20}>
|
||||
<div className="flex items-start justify-start gap-[4px]">
|
||||
<LocationClinic />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[16px] font-normal">
|
||||
آدرس:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal">
|
||||
{data.location}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={120} height={30}>
|
||||
<Button className="!py-[8px] !px-[12px] !gap-[8px]" variant="text">
|
||||
<RoutingC />
|
||||
<p className="text-[#5559CE] text-[14px] font-medium">
|
||||
مسیریابی آدرس
|
||||
</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<li className="flex items-center justify-start gap-[4px]">
|
||||
<CallD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[16px] font-normal">
|
||||
تلفن:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal">
|
||||
{data.phone}
|
||||
</span>
|
||||
</p>
|
||||
</li>
|
||||
</TextLoading>
|
||||
</ul>
|
||||
<div className="flex items-center gap-[4px] w-fit">
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<TicketD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
مبلغ پرداخت شده :{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
{data.amount_paid} تومان
|
||||
</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<Button
|
||||
className="!px-[12px] !hidden md:!flex !mt-[24px] !py-[8px] !border !border-solid !border-[#D7D7D7] !rounded-[4px] !w-fit !items-center !justify-center !gap-[4px]"
|
||||
variant="outlined"
|
||||
>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<DownloadD />
|
||||
<p className="text-[#616161] text-[16px] font-medium">
|
||||
دانلود اطلاعات نوبت
|
||||
</p>
|
||||
</TextLoading>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailLg
|
||||
export default DetailLg;
|
||||
|
||||
@@ -1,88 +1,105 @@
|
||||
import RoutingC from '@/components/icons/RoutingC';
|
||||
import TicketD from '@/components/icons/TicketD';
|
||||
import { Button } from '@mui/material';
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
import ButtonData from './ButtonData';
|
||||
import CircularLoading from '@/app/component/loading/Circular';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import RoutingC from "@/components/icons/RoutingC";
|
||||
import TicketD from "@/components/icons/TicketD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import ButtonData from "./ButtonData";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function DetailSm({ user, loading }) {
|
||||
const data = user.turns[1];
|
||||
|
||||
const data = user.turns[1];
|
||||
|
||||
return (
|
||||
<div className='mt-[20px] block md:hidden'>
|
||||
<div className='flex items-center justify-start gap-[8px]'>
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={data.image}
|
||||
alt='profile'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className='flex flex-col justify-center items-start gap-[8px]'>
|
||||
<TextLoading loading={loading} width={60} height={14}>
|
||||
<p className='text-[#616161] text-[14px] font-medium'>{data.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={70} height={14}>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-normal'>{data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className='flex w-full flex-col items-start justify-start mt-[16px]'>
|
||||
<li className="flex items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={70} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">تاریخ نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={55} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">{data.date}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
|
||||
<li className="flex flex-wrap items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={80} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">{data.time}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
|
||||
<li className="flex flex-wrap gap-x-[12px] gap-y-[12px] items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={200} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">آدرس:<span className='text-[#616161]'>{data.location}</span></p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={130} height={40}>
|
||||
<Button
|
||||
className='!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]'
|
||||
variant='outlined'
|
||||
>
|
||||
<RoutingC />
|
||||
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-normal mt-[12px]'>تلفن: <span className='text-[#616161]'>{data.phone}</span></p>
|
||||
</TextLoading>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
|
||||
<li className='flex items-center justify-between w-full'>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<div className='flex items-center gap-[4px] w-fit'>
|
||||
<TicketD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className='text-[#616161] text-[14px] font-bold'>{data.amount_paid} تومان</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<ButtonData loading={loading} />
|
||||
return (
|
||||
<div className="mt-[20px] block md:hidden">
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image src={data.image} alt="profile" height={32} width={32} />
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col justify-center items-start gap-[8px]">
|
||||
<TextLoading loading={loading} width={60} height={14}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={70} height={14}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
{data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
<ul className="flex w-full flex-col items-start justify-start mt-[16px]">
|
||||
<li className="flex items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={70} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">
|
||||
تاریخ نوبت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={55} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
|
||||
<li className="flex flex-wrap items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={80} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">
|
||||
{data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
|
||||
<li className="flex flex-wrap gap-x-[12px] gap-y-[12px] items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={200} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
آدرس:<span className="text-[#616161]">{data.location}</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={130} height={40}>
|
||||
<Button
|
||||
className="!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]"
|
||||
variant="outlined"
|
||||
>
|
||||
<RoutingC />
|
||||
<p className="text-[#5559CE] text-[14px] font-medium">
|
||||
مسیریابی آدرس
|
||||
</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal mt-[12px]">
|
||||
تلفن: <span className="text-[#616161]">{data.phone}</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
|
||||
<li className="flex items-center justify-between w-full">
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<div className="flex items-center gap-[4px] w-fit">
|
||||
<TicketD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
مبلغ پرداخت شده :{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
{data.amount_paid} تومان
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-bold">
|
||||
{data.amount_paid} تومان
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<ButtonData loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailSm
|
||||
export default DetailSm;
|
||||
|
||||
@@ -4,22 +4,24 @@ import ButtonData from "./ButtonData";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function Head({ user, setIsTurnsDetails, loading }) {
|
||||
return (
|
||||
<div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
|
||||
<div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<Button
|
||||
onClick={() => setIsTurnsDetails(false)}
|
||||
className="!p-[6px] !border !border-solid !border-[#EFEFEF] !rounded-[4px] !min-w-0"
|
||||
>
|
||||
<ArrowRightS />
|
||||
</Button>
|
||||
<TextLoading width={70} height={20} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">جزئیات نوبت شما</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ButtonData loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
|
||||
<div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<Button
|
||||
onClick={() => setIsTurnsDetails(false)}
|
||||
className="!p-[6px] !border !border-solid !border-[#EFEFEF] !rounded-[4px] !min-w-0"
|
||||
>
|
||||
<ArrowRightS />
|
||||
</Button>
|
||||
<TextLoading width={70} height={20} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
جزئیات نوبت شما
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ButtonData loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
|
||||
import DetailLg from "./DetailLg"
|
||||
import DetailSm from "./DetailSm"
|
||||
import Head from "./Head"
|
||||
import DetailLg from "./DetailLg";
|
||||
import DetailSm from "./DetailSm";
|
||||
import Head from "./Head";
|
||||
|
||||
function IsTurnsDetails({ user, setIsTurnsDetails, loading }) {
|
||||
return (
|
||||
<div className="md:py-[20px] md:px-[24px] opacity-page">
|
||||
<Head
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
<DetailLg user={user} loading={loading} />
|
||||
<DetailSm user={user} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="md:py-[20px] md:px-[24px] opacity-page">
|
||||
<Head
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
<DetailLg user={user} loading={loading} />
|
||||
<DetailSm user={user} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IsTurnsDetails
|
||||
export default IsTurnsDetails;
|
||||
|
||||
@@ -1,69 +1,65 @@
|
||||
import { useState } from 'react';
|
||||
import { Box, Button, Modal } from '@mui/material';
|
||||
import { styleDefault } from '@/mui';
|
||||
import CloseModalD from '@/components/icons/CloseModalD';
|
||||
import { useState } from "react";
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
|
||||
function ModalDeleteComment({ loading }) {
|
||||
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 (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className={`
|
||||
${!loading && '!border-[#828DE0]'}
|
||||
return (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className={`
|
||||
${!loading && "!border-[#828DE0]"}
|
||||
!rounded-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]
|
||||
`}
|
||||
disabled={loading}
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
لغو کردن نوبت
|
||||
disabled={loading}
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
لغو کردن نوبت
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<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 onClick={handleClose} className="!p-1" variant="text">
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
|
||||
آیا از لغو کردن نوبت مطمئن هستید؟
|
||||
</p>
|
||||
<div className="flex items-center justify-end gap-[16px] mt-[12px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium"
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<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
|
||||
onClick={handleClose}
|
||||
className='!p-1'
|
||||
variant='text'
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
|
||||
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا از لغو کردن نوبت مطمئن هستید؟</p>
|
||||
<div className='flex items-center justify-end gap-[16px] mt-[12px]'>
|
||||
<Button
|
||||
variant='outlined'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant='contained'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
|
||||
>
|
||||
لغو نوبت
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
>
|
||||
لغو نوبت
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalDeleteComment
|
||||
export default ModalDeleteComment;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user