hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier formatter to all file

Browse Source
This commit is contained in:
Ehsan
2024-09-25 11:03:44 +03:30
parent fa38ee2b21
commit eda896e917
410 changed files with 47636 additions and 43842 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/about-us/page.js
+8 -8
View File
@@ -1,12 +1,12 @@
import AboutUsPage from '@/components/aboutUs'; import AboutUsPage from "@/components/aboutUs";
import Layout from '@/components/layout'; import Layout from "@/components/layout";
function AboutUs() { function AboutUs() {
return ( return (
<Layout title='درباره ما' name='about-us'> <Layout title="درباره ما" name="about-us">
<AboutUsPage /> <AboutUsPage />
</Layout> </Layout>
) );
} }
export default AboutUs export default AboutUs;
app/blog/[slug]/page.js
+10 -14
View File
@@ -1,19 +1,15 @@
import BlogPage from '@/components/blog'; import BlogPage from "@/components/blog";
import Layout from '@/components/layout'; import Layout from "@/components/layout";
import articles from '@/data/articles.json'; import articles from "@/data/articles.json";
function Blog({ params: { slug } }) { function Blog({ params: { slug } }) {
const article = articles.find((item) => item.id === +slug);
const article = articles.find(item => item.id === +slug); return (
<Layout title="وبلاگ" name="blog">
return ( <BlogPage article={article} articles={articles} />
<Layout title='وبلاگ' name='blog'> </Layout>
<BlogPage );
article={article}
articles={articles}
/>
</Layout>
)
} }
export default Blog export default Blog;
app/blogs/page.js
+8 -8
View File
@@ -1,12 +1,12 @@
import BlogsPage from '@/components/blogs' import BlogsPage from "@/components/blogs";
import Layout from '@/components/layout' import Layout from "@/components/layout";
function Blogs() { function Blogs() {
return ( return (
<Layout title='وبلاگ ها' name='blogs'> <Layout title="وبلاگ ها" name="blogs">
<BlogsPage /> <BlogsPage />
</Layout> </Layout>
) );
} }
export default Blogs export default Blogs;
app/booking/[slug]/page.js
+61 -58
View File
@@ -1,68 +1,71 @@
'use client' "use client";
import { useState } from 'react'; import { useState } from "react";
import Layout from '@/components/layout'; import Layout from "@/components/layout";
import doctors from '@/data/doctors.json'; import doctors from "@/data/doctors.json";
import Date from '@/components/booking/date'; import Date from "@/components/booking/date";
import BookingPage from '@/components/booking'; import BookingPage from "@/components/booking";
import RegisterPage from '@/components/register'; import RegisterPage from "@/components/register";
import Paying from '@/components/booking/paying'; import Paying from "@/components/booking/paying";
import Detail from '@/components/booking/detail'; import Detail from "@/components/booking/detail";
import FailedPay from '@/components/booking/failedPay'; import FailedPay from "@/components/booking/failedPay";
import LogInPage from '@/components/register/LogInPage'; import LogInPage from "@/components/register/LogInPage";
import SuccessPay from '@/components/booking/successPay'; import SuccessPay from "@/components/booking/successPay";
import SetCodePage from '@/components/register/SetCodePage'; import SetCodePage from "@/components/register/SetCodePage";
function Booking({ params: { slug } }) { function Booking({ params: { slug } }) {
const doctor = doctors.find((item) => item.id === +slug);
const doctor = doctors.find(item => item.id === +slug); const [step, setStep] = useState(0);
const [isForAnother, setIsForAnother] = useState(false);
const [step, setStep] = useState(0); const [data, setData] = useState({
const [isForAnother, setIsForAnother] = useState(false); phone: { value: "09121056987", isEdit: false },
codemeli: { value: "1741025645", isEdit: false },
name: { value: "ساغر صابری نژاد", isEdit: false },
});
const [data, setData] = useState({ const elements = [
phone: { value: '09121056987', isEdit: false }, <Date doctor={doctor} setStep={setStep} />,
codemeli: { value: '1741025645', isEdit: false }, <LogInPage setIsSendMsg={false} setStep={setStep} />,
name: { value: 'ساغر صابری نژاد', isEdit: false } <SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
}); <Detail
isForAnother={isForAnother}
setIsForAnother={setIsForAnother}
setStep={setStep}
data={data}
setData={setData}
/>,
<Paying setStep={setStep} />,
<SuccessPay setStep={setStep} />,
<FailedPay setStep={setStep} />,
];
const elements = [ return (
<Date doctor={doctor} setStep={setStep} />, <>
<LogInPage setIsSendMsg={false} setStep={setStep} />, {step === 1 || step === 2 ? (
<SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />, <RegisterPage>{elements[step]}</RegisterPage>
<Detail isForAnother={isForAnother} setIsForAnother={setIsForAnother} setStep={setStep} data={data} setData={setData} />, ) : (
<Paying setStep={setStep} />, <Layout
<SuccessPay setStep={setStep} />, title="رزرو"
<FailedPay setStep={setStep} /> name="booking"
] disableFooter={step > 2}
paddingBottom="pb-[80px]"
return ( >
<> <BookingPage
{step === 1 || step === 2 ? ( disableSide={step === 5 || step === 6}
<RegisterPage> isFirst={step === 0}
{elements[step]} setStep={setStep}
</RegisterPage> doctor={doctor}
) : ( step={step}
<Layout >
title='رزرو' {elements[step]}
name='booking' </BookingPage>
disableFooter={step > 2} </Layout>
paddingBottom='pb-[80px]' )}
> </>
<BookingPage );
disableSide={step === 5 || step === 6}
isFirst={step === 0}
setStep={setStep}
doctor={doctor}
step={step}
>
{elements[step]}
</BookingPage>
</Layout>
)}
</>
)
} }
export default Booking export default Booking;
app/clinic/[slug]/page.js
+11 -15
View File
@@ -1,20 +1,16 @@
import ClinicPage from '@/components/clinic'; import ClinicPage from "@/components/clinic";
import Layout from '@/components/layout'; import Layout from "@/components/layout";
import clinics from '@/data/clinics.json'; import clinics from "@/data/clinics.json";
import doctors from '@/data/doctors.json'; import doctors from "@/data/doctors.json";
function Blog({ params: { slug } }) { function Blog({ params: { slug } }) {
const clinic = clinics.find((item) => item.id === +slug);
const clinic = clinics.find(item => item.id === +slug); return (
<Layout title="کلینیک" name="clinic">
return ( <ClinicPage data={clinic} doctors={doctors} />
<Layout title='کلینیک' name='clinic'> </Layout>
<ClinicPage );
data={clinic}
doctors={doctors}
/>
</Layout>
)
} }
export default Blog export default Blog;
app/clinics/page.js
+8 -8
View File
@@ -1,12 +1,12 @@
import ClinicsPage from '@/components/clinics'; import ClinicsPage from "@/components/clinics";
import Layout from '@/components/layout'; import Layout from "@/components/layout";
function Clinics() { function Clinics() {
return ( return (
<Layout title='کلینیک ها' name='clinics'> <Layout title="کلینیک ها" name="clinics">
<ClinicsPage /> <ClinicsPage />
</Layout> </Layout>
) );
} }
export default Clinics export default Clinics;
app/component/AnimationTextHead.js
+16 -13
View File
@@ -1,16 +1,19 @@
function AnimationTextHead({ name, text, children }) { function AnimationTextHead({ name, text, children }) {
return ( return (
<div className='flex justify-center items-start relative w-fit'> <div className="flex justify-center items-start relative w-fit">
<div className='overflow-hidden mb-[4px] md:mb-[5px] lg:mb-[6px]'> <div className="overflow-hidden mb-[4px] md:mb-[5px] lg:mb-[6px]">
<p <p
data-aos={name} data-aos={name}
className='text-[#3B3B3B] text-nowrap overflow-hidden text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold'>{text}</p> className="text-[#3B3B3B] text-nowrap overflow-hidden text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold"
</div> >
<div className="absolute bottom-0 right-1/2 translate-x-1/2 w-full flex justify-center"> {text}
{children} </p>
</div> </div>
</div> <div className="absolute bottom-0 right-1/2 translate-x-1/2 w-full flex justify-center">
) {children}
</div>
</div>
);
} }
export default AnimationTextHead export default AnimationTextHead;
app/component/CustomTable.js
+40 -33
View File
@@ -1,39 +1,46 @@
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material' import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
function CustomTable({ tableHead, zeroRadius, centerTable, children }) { function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
return ( return (
<TableContainer <TableContainer
className='!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]' className="!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
sx={{ sx={{
'&.MuiTableContainer-root': { "&.MuiTableContainer-root": {
borderRadius: zeroRadius && '0 !important' borderRadius: zeroRadius && "0 !important",
} },
}} }}
> >
<Table className='!rounded-0 !shadow-none !overflow-hidden'> <Table className="!rounded-0 !shadow-none !overflow-hidden">
<TableHead> <TableHead>
<TableRow <TableRow className="!bg-[#EFEFEF]">
className='!bg-[#EFEFEF]' {tableHead.map((item, idx) => (
> <TableCell
{tableHead.map((item, idx) => ( key={idx}
<TableCell className={`
key={idx}
className={`
!text-[#616161] !text-[14px] !font-normal !py-[10px] !px-[18px] !text-[#616161] !text-[14px] !font-normal !py-[10px] !px-[18px]
${centerTable.includes(idx) ? '!text-center' : '!text-start'} ${
centerTable.includes(idx)
? "!text-center"
: "!text-start"
}
`} `}
> >
{item} {item}
</TableCell> </TableCell>
))} ))}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>{children}</TableBody>
{children} </Table>
</TableBody> </TableContainer>
</Table> );
</TableContainer>
)
} }
export default CustomTable export default CustomTable;
app/component/EditField.js
+60 -52
View File
@@ -1,55 +1,63 @@
import EditGrayA from "@/components/icons/EditGrayA" import EditGrayA from "@/components/icons/EditGrayA";
import EditOrangeA from "@/components/icons/EditOrangeA" import EditOrangeA from "@/components/icons/EditOrangeA";
import { Button, TextField } from "@mui/material" import { Button, TextField } from "@mui/material";
function EditField({ changeData, multiline, icon, placeholder, data, name, iconGray, isTransparent }) { function EditField({
return ( changeData,
<div className="relative w-full"> multiline,
<TextField icon,
value={data?.value} placeholder,
rows={multiline} data,
multiline={multiline} name,
disabled={!data?.isEdit} iconGray,
placeholder={placeholder || ''} isTransparent,
type='text' }) {
className={`!w-full res-field-account ${isTransparent ? '!bg-transparent lg:!bg-[#FFF]' : '!bg-[#FFF]'}`} return (
onChange={e => { <div className="relative w-full">
changeData(e.target.value, 'value', name) <TextField
}} value={data?.value}
sx={{ rows={multiline}
'& .MuiFormLabel-root': { multiline={multiline}
top: '-4px !important' disabled={!data?.isEdit}
}, placeholder={placeholder || ""}
'& .MuiInputBase-input': { padding: '12.5px 14px' }, type="text"
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' }, className={`!w-full res-field-account ${
'& .MuiInputBase-root': { isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
padding: '0 !important', }`}
borderRadius: '8px !important' onChange={(e) => {
}, changeData(e.target.value, "value", name);
'.Mui-focused': { }}
'& .MuiOutlinedInput-notchedOutline': { sx={{
border: '1px solid #5559CE !important', "& .MuiFormLabel-root": {
transition: '0.5s all' top: "-4px !important",
} },
} "& .MuiInputBase-input": { padding: "12.5px 14px" },
}} "& .MuiOutlinedInput-notchedOutline": {
/> border: "1px solid #D7D7D7 !important",
<Button },
className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1 "& .MuiInputBase-root": {
${multiline ? '!top-[24px]' : '!top-1/2'}`} padding: "0 !important",
onClick={() => { borderRadius: "8px !important",
changeData(!data.isEdit, 'isEdit', name) },
}} ".Mui-focused": {
> "& .MuiOutlinedInput-notchedOutline": {
{icon ? icon : border: "1px solid #5559CE !important",
iconGray ? ( transition: "0.5s all",
<EditGrayA /> },
) : ( },
<EditOrangeA /> }}
)} />
</Button> <Button
</div> className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
) ${multiline ? "!top-[24px]" : "!top-1/2"}`}
onClick={() => {
changeData(!data.isEdit, "isEdit", name);
}}
>
{icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
</Button>
</div>
);
} }
export default EditField export default EditField;
app/component/Field.js
+28 -26
View File
@@ -1,30 +1,32 @@
import { TextField } from "@mui/material" import { TextField } from "@mui/material";
function Field({ title, type, multiline, isPlaceHolder }) { function Field({ title, type, multiline, isPlaceHolder }) {
return ( return (
<TextField <TextField
placeholder={isPlaceHolder && title} placeholder={isPlaceHolder && title}
label={!isPlaceHolder ? title : ''} label={!isPlaceHolder ? title : ""}
type={type || 'text'} type={type || "text"}
multiline={!!multiline} multiline={!!multiline}
rows={!!multiline ? 4 : 1} rows={!!multiline ? 4 : 1}
className="!w-full !mx-auto !bg-[#FFF]" className="!w-full !mx-auto !bg-[#FFF]"
sx={{ sx={{
'& .MuiFormLabel-root': { "& .MuiFormLabel-root": {
top: '-4px !important' top: "-4px !important",
}, },
'& .MuiInputBase-input': { padding: '12.5px 14px' }, "& .MuiInputBase-input": { padding: "12.5px 14px" },
'& .MuiInputBase-root': { borderRadius: '6px !important' }, "& .MuiInputBase-root": { borderRadius: "6px !important" },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' }, "& .MuiOutlinedInput-notchedOutline": {
".Mui-focused": { border: "1px solid #E9ECEF !important",
'& .MuiOutlinedInput-notchedOutline': { },
border: '1px solid #5559CE !important', ".Mui-focused": {
transition: '0.5s all' "& .MuiOutlinedInput-notchedOutline": {
} border: "1px solid #5559CE !important",
} transition: "0.5s all",
}} },
/> },
) }}
/>
);
} }
export default Field export default Field;
app/component/FieldIcon.js
+38 -38
View File
@@ -1,42 +1,42 @@
import EditGrayA from "@/components/icons/EditGrayA" import EditGrayA from "@/components/icons/EditGrayA";
import EditOrangeA from "@/components/icons/EditOrangeA" import EditOrangeA from "@/components/icons/EditOrangeA";
import { Button, TextField } from "@mui/material" import { Button, TextField } from "@mui/material";
function FieldIcon({ changeData, icon, placeholder, name }) { function FieldIcon({ changeData, icon, placeholder, name }) {
return ( return (
<div className="relative w-full"> <div className="relative w-full">
<TextField <TextField
placeholder={placeholder || ''} placeholder={placeholder || ""}
type='text' type="text"
className='!w-full' className="!w-full"
onChange={e => { onChange={(e) => {
changeData(e.target.value, name) changeData(e.target.value, name);
}} }}
sx={{ sx={{
'& .MuiFormLabel-root': { "& .MuiFormLabel-root": {
top: '-4px !important' top: "-4px !important",
}, },
'& .MuiInputBase-input': { padding: '12.5px 14px' }, "& .MuiInputBase-input": { padding: "12.5px 14px" },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' }, "& .MuiOutlinedInput-notchedOutline": {
'& .MuiInputBase-root': { border: "1px solid #D7D7D7 !important",
padding: '0 !important', },
borderRadius: '8px !important' "& .MuiInputBase-root": {
}, padding: "0 !important",
'.Mui-focused': { borderRadius: "8px !important",
'& .MuiOutlinedInput-notchedOutline': { },
border: '1px solid #5559CE !important', ".Mui-focused": {
transition: '0.5s all' "& .MuiOutlinedInput-notchedOutline": {
} border: "1px solid #5559CE !important",
} transition: "0.5s all",
}} },
/> },
<Button }}
className='!absolute !top-1/2 !left-[8px] !-translate-y-1/2 !min-w-fit !p-1' />
> <Button className="!absolute !top-1/2 !left-[8px] !-translate-y-1/2 !min-w-fit !p-1">
{icon} {icon}
</Button> </Button>
</div> </div>
) );
} }
export default FieldIcon export default FieldIcon;
app/component/ItemDoctor.js
+78 -67
View File
@@ -12,75 +12,86 @@ import TextLoading from "./loading/Text";
import CircularLoading from "./loading/Circular"; import CircularLoading from "./loading/Circular";
function ItemDoctor({ doctor, loading }) { function ItemDoctor({ doctor, loading }) {
return ( return (
<li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]"> <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
{/* Detail Doctor */} {/* Detail Doctor */}
<div className="flex items-center justify-start gap-2.5"> <div className="flex items-center justify-start gap-2.5">
<CircularLoading loading={loading} width={66} height={66}> <CircularLoading loading={loading} width={66} height={66}>
<Image <Image
width={72} width={72}
height={72} height={72}
src={doctor.img} src={doctor.img}
alt="image-doctor" alt="image-doctor"
className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]" className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
/> />
</CircularLoading> </CircularLoading>
<div className="flex flex-col items-start justify-center gap-2"> <div className="flex flex-col items-start justify-center gap-2">
<TextLoading width={90} height={15} loading={loading}> <TextLoading width={90} height={15} loading={loading}>
<p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p> <p className="text-[#3B3B3B] text-[14px] font-bold">
</TextLoading> {doctor.name}
<TextLoading width={120} height={15} loading={loading}> </p>
<p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p> </TextLoading>
</TextLoading> <TextLoading width={120} height={15} loading={loading}>
<CustomLoading width={100} height={25} loading={loading}> <p className="text-[#616161] text-[14px] font-normal">
<div className="flex rounded items-center justify-start gap-2"> تخصص: {doctor.expertise}
<div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5"> </p>
<LikeD /> </TextLoading>
<p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p> <CustomLoading width={100} height={25} loading={loading}>
</div> <div className="flex rounded items-center justify-start gap-2">
<div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5"> <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
<PointD /> <LikeD />
<p className="text-[#616161] text-[12px] font-normal">{doctor.point}</p> <p className="text-[#616161] text-[12px] font-normal">
</div> {doctor.satisfaction}%
</div> </p>
</CustomLoading> </div>
</div> <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
<PointD />
<p className="text-[#616161] text-[12px] font-normal">
{doctor.point}
</p>
</div>
</div> </div>
</CustomLoading>
</div>
</div>
{/* Hours of work */} {/* Hours of work */}
<div className="flex my-4 items-center justify-start gap-0.5"> <div className="flex my-4 items-center justify-start gap-0.5">
<ClockD /> <ClockD />
<TextLoading width={150} height={15} loading={loading}> <TextLoading width={150} height={15} loading={loading}>
<p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {doctor.hours_of_work}</p> <p className="text-[#7E7E7E] text-[12px] font-normal">
</TextLoading> ساعت کاری: {doctor.hours_of_work}
</div> </p>
<CustomLoading loading={loading} width={150} height={20}> </TextLoading>
<p </div>
className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px] <CustomLoading loading={loading} width={150} height={20}>
${doctor.free_turn ? <p
'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' : className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]' ${
}`} doctor.free_turn
>{doctor.free_turn ? ? "bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]"
`اولین نوبت آزاد: ${doctor.free_turn}` : : "bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]"
'نوبت ندارد' }`}
}</p> >
</CustomLoading> {doctor.free_turn
{/* Arrow */} ? `اولین نوبت آزاد: ${doctor.free_turn}`
<Link href={`/doctor/${doctor.id}`}> : "نوبت ندارد"}
<Button </p>
variant="contained" </CustomLoading>
className={`!p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit {/* Arrow */}
${!doctor.free_turn || loading && <Link href={`/doctor/${doctor.id}`}>
'!bg-[#D7D7D7]'} <Button
variant="contained"
className={`!p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit
${!doctor.free_turn || (loading && "!bg-[#D7D7D7]")}
`} `}
disabled={!doctor.free_turn || loading} disabled={!doctor.free_turn || loading}
> >
<ArrowLeftD /> <ArrowLeftD />
</Button> </Button>
</Link> </Link>
</li> </li>
) );
} }
export default ItemDoctor export default ItemDoctor;
app/component/Logo.js
+20 -18
View File
@@ -1,22 +1,24 @@
import Image from 'next/image' import Image from "next/image";
import Link from 'next/link' import Link from "next/link";
import React from 'react' import React from "react";
function Logo({ isAbsolute }) { function Logo({ isAbsolute }) {
return ( return (
<Link href='/' className={isAbsolute ? 'absolute right-[32px] top-0' : ''}> <Link href="/" className={isAbsolute ? "absolute right-[32px] top-0" : ""}>
<div className="flex items-center justify-start gap-[5px]"> <div className="flex items-center justify-start gap-[5px]">
<Image <Image
className='w-[20px] h-[20px] sm:w-[23px] sm:h-[23px] md:w-[26px] md:h-[26px] lg:w-[30px] lg:h-[30px]' className="w-[20px] h-[20px] sm:w-[23px] sm:h-[23px] md:w-[26px] md:h-[26px] lg:w-[30px] lg:h-[30px]"
src='/assets/images/logo.png' src="/assets/images/logo.png"
width={30} width={30}
height={30} height={30}
alt="logo" alt="logo"
/> />
<p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold font-kalame">نوبت ۷۲۴</p> <p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold font-kalame">
</div> نوبت ۷۲۴
</Link> </p>
) </div>
</Link>
);
} }
export default Logo export default Logo;
app/component/Pageguide.js
+25 -20
View File
@@ -1,26 +1,31 @@
function Pageguide({ list }) { function Pageguide({ list }) {
return ( return (
<ul className='flex items-center justify-start gap-1'> <ul className="flex items-center justify-start gap-1">
{list.map((item, idx) => ( {list.map((item, idx) => (
<li <li key={idx} className="flex items-center justify-start gap-1">
key={idx} <p
className="flex items-center justify-start gap-1" className={`text-[16px] font-normal
> ${
<p list.length > idx + 1
className={`text-[16px] font-normal ? "text-[#9B9B9B]"
${list.length > idx + 1 ? 'text-[#9B9B9B]' : 'text-[#525252]'} : "text-[#525252]"
}
`} `}
>{item}</p> >
<span {item}
className={` </p>
<span
className={`
text-[#9B9B9B] text-[16px] font-normal text-[#9B9B9B] text-[16px] font-normal
${list.length > idx + 1 ? 'flex' : 'hidden'} ${list.length > idx + 1 ? "flex" : "hidden"}
`} `}
>{'>'}</span> >
</li> {">"}
))} </span>
</ul> </li>
) ))}
</ul>
);
} }
export default Pageguide export default Pageguide;
app/component/Pagination.js
+23 -22
View File
@@ -1,26 +1,27 @@
import { Pagination as PaginationMUI } from '@mui/material' import { Pagination as PaginationMUI } from "@mui/material";
function Pagination() { function Pagination() {
return ( return (
<PaginationMUI <PaginationMUI
// count={doctors.length / 12} org // count={doctors.length / 12} org
count={20} // test count={20} // test
color='primary' color="primary"
sx={{ sx={{
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root': { "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
color: '#616161', color: "#616161",
fontSize: '16px', fontSize: "16px",
fontWeight: '500' fontWeight: "500",
}, },
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': { "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
color: '#F8F8FF' {
}, color: "#F8F8FF",
'& .MuiSvgIcon-root': { },
rotate: '180deg !important' "& .MuiSvgIcon-root": {
} rotate: "180deg !important",
}} },
/> }}
) />
);
} }
export default Pagination export default Pagination;
app/component/ProfressDetail.js
+24 -20
View File
@@ -1,24 +1,28 @@
import { numberToArStyle } from "@/helper" import { numberToArStyle } from "@/helper";
import { LinearProgress } from "@mui/material" import { LinearProgress } from "@mui/material";
function ProgressDetail({ data }) { function ProgressDetail({ data }) {
return ( return (
<li className="flex items-center justify-start gap-2 w-full"> <li className="flex items-center justify-start gap-2 w-full">
<p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p> <p className="text-[#525252] text-[14px] font-normal w-[118px]">
<LinearProgress {data.label}
value={data.progress} </p>
variant="determinate" <LinearProgress
className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]" value={data.progress}
sx={{ variant="determinate"
'& .MuiLinearProgress-bar': { className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
background: '#05BA58', sx={{
borderRadius: '10px' "& .MuiLinearProgress-bar": {
} background: "#05BA58",
}} borderRadius: "10px",
/> },
<p className="text-[#525252] text-[20px] font-medium">{numberToArStyle(data.progress)}%</p> }}
</li> />
) <p className="text-[#525252] text-[20px] font-medium">
{numberToArStyle(data.progress)}%
</p>
</li>
);
} }
export default ProgressDetail export default ProgressDetail;
app/component/ProgressChange.js
+35 -36
View File
@@ -1,41 +1,40 @@
import { Slider } from "@mui/material" import { Slider } from "@mui/material";
import { useState } from "react" import { useState } from "react";
function ProgressChange({ data }) { function ProgressChange({ data }) {
const [value, setValue] = useState(70);
const [value, setValue] = useState(70) return (
<li className="flex items-center justify-start gap-3 w-full">
return ( <p className="text-[#525252] text-[14px] font-normal w-[118px]">
<li className="flex items-center justify-start gap-3 w-full"> {data.label}
<p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p> </p>
<Slider <Slider
defaultValue={value} defaultValue={value}
className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]" className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
onChange={e => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
sx={{ sx={{
'& .MuiSlider-rail': { "& .MuiSlider-rail": {
background: '#E8E8E8', background: "#E8E8E8",
opacity: '100' opacity: "100",
}, },
'& .MuiSlider-track': { "& .MuiSlider-track": {
background: '#05BA58', background: "#05BA58",
border: 'none' border: "none",
}, },
'& .MuiSlider-thumb': { "& .MuiSlider-thumb": {
marginRight: '-21px', marginRight: "-21px",
background: '#EBEBEB', background: "#EBEBEB",
border: '1px solid #05BA58 !important' border: "1px solid #05BA58 !important",
}, },
'& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': { "& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover": {
boxShadow: 'none' boxShadow: "none",
}, },
}} }}
/> />
<p className="text-[#525252] text-[20px] font-medium w-[30px]"> <p className="text-[#525252] text-[20px] font-medium w-[30px]">{value}</p>
{value} </li>
</p> );
</li>
)
} }
export default ProgressChange export default ProgressChange;
app/component/Tabs.js
+35 -37
View File
@@ -1,41 +1,39 @@
import { Box, Tab, Tabs as TabsMUI } from '@mui/material'; import { Box, Tab, Tabs as TabsMUI } from "@mui/material";
function a11yProps(index) { function a11yProps(index) {
return { return {
id: `simple-tab-${index}`, id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`, "aria-controls": `simple-tabpanel-${index}`,
}; };
};
function Tabs({ value, handleChange, listTab, isSm, style }) {
return (
<Box
className="!border-none !w-full"
>
<TabsMUI
value={value}
onChange={handleChange}
sx={{
...style,
'.MuiTabs-fixed': {
overflow: 'auto !important'
},
}}
>
{listTab.map((item, idx) => (
<Tab
key={idx}
label={item}
{...a11yProps(idx)}
className={`
text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
${isSm ? '!w-1/2 !m-0' : '!mr-2'}
`}
/>
))}
</TabsMUI>
</Box>
)
} }
export default Tabs function Tabs({ value, handleChange, listTab, isSm, style }) {
return (
<Box className="!border-none !w-full">
<TabsMUI
value={value}
onChange={handleChange}
sx={{
...style,
".MuiTabs-fixed": {
overflow: "auto !important",
},
}}
>
{listTab.map((item, idx) => (
<Tab
key={idx}
label={item}
{...a11yProps(idx)}
className={`
text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
${isSm ? "!w-1/2 !m-0" : "!mr-2"}
`}
/>
))}
</TabsMUI>
</Box>
);
}
export default Tabs;
app/component/ThemeRegistry.js
+56 -58
View File
@@ -1,65 +1,63 @@
// app/ThemeRegistry.tsx // app/ThemeRegistry.tsx
'use client'; "use client";
import createCache from '@emotion/cache'; import createCache from "@emotion/cache";
import { prefixer } from 'stylis'; import { prefixer } from "stylis";
import rtlPlugin from 'stylis-plugin-rtl'; import rtlPlugin from "stylis-plugin-rtl";
import { useServerInsertedHTML } from 'next/navigation'; import { useServerInsertedHTML } from "next/navigation";
import { CacheProvider, ThemeProvider } from '@emotion/react'; import { CacheProvider, ThemeProvider } from "@emotion/react";
import React from 'react'; import React from "react";
import theme from '../theme/theme'; import theme from "../theme/theme";
// This implementation is from emotion-js // This implementation is from emotion-js
// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902 // https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
export default function ThemeRegistry({ export default function ThemeRegistry({ children }) {
children const options = {
}) { key: "muirtl",
const options = { stylisPlugins: [prefixer, rtlPlugin],
key: 'muirtl', };
stylisPlugins: [prefixer, rtlPlugin], const [{ cache, flush }] = React.useState(() => {
const cache = createCache(options);
cache.compat = true;
const prevInsert = cache.insert;
let inserted = [];
cache.insert = (...args) => {
const serialized = args[1];
if (cache.inserted[serialized.name] === undefined) {
inserted.push(serialized.name);
}
return prevInsert(...args);
};
const flush = () => {
const prevInserted = inserted;
inserted = [];
return prevInserted;
};
return { cache, flush };
});
useServerInsertedHTML(() => {
const names = flush();
if (names.length === 0) {
return null;
}
let styles = "";
for (const name of names) {
styles += cache.inserted[name];
} }
const [{ cache, flush }] = React.useState(() => {
const cache = createCache(options);
cache.compat = true;
const prevInsert = cache.insert;
let inserted = [];
cache.insert = (...args) => {
const serialized = args[1];
if (cache.inserted[serialized.name] === undefined) {
inserted.push(serialized.name);
}
return prevInsert(...args);
};
const flush = () => {
const prevInserted = inserted;
inserted = [];
return prevInserted;
};
return { cache, flush };
});
useServerInsertedHTML(() => {
const names = flush();
if (names.length === 0) {
return null;
}
let styles = '';
for (const name of names) {
styles += cache.inserted[name];
}
return (
<style
key={cache.key}
data-emotion={`${cache.key} ${names.join(' ')}`}
dangerouslySetInnerHTML={{
__html: styles,
}}
/>
);
});
return ( return (
<CacheProvider value={cache}> <style
<ThemeProvider theme={theme}>{children}</ThemeProvider> key={cache.key}
</CacheProvider> data-emotion={`${cache.key} ${names.join(" ")}`}
dangerouslySetInnerHTML={{
__html: styles,
}}
/>
); );
} });
return (
<CacheProvider value={cache}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</CacheProvider>
);
}
app/component/TimePickerField.js
+73 -62
View File
@@ -1,73 +1,84 @@
import { useState } from "react"; import { useState } from "react";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers" import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
function TimePickerField({ dataChange, disable, setData, timeStart, data }) { function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
const [value, setValue] = useState("00:00");
const [value, setValue] = useState('00:00'); return (
<div className="w-full relative">
<LocalizationProvider dateAdapter={AdapterDayjs}>
<TimePicker
ampm={false}
disabled={disable}
format="hh:mm"
className="!w-full"
shouldDisableTime={(timeValue, clockType) => {
if (clockType === "hours") {
const { idx, is_morgen } = dataChange;
const value =
data[idx][is_morgen ? "morning_time" : "evening_time"][0];
const hourSelected = value ? +value.split(":")[0] : false;
return ( const disableMinHour =
<div className="w-full relative"> timeStart || !value ? false : hourSelected + 1 > timeValue.$H;
<LocalizationProvider dateAdapter={AdapterDayjs}> return dataChange.is_morgen
<TimePicker ? !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour)
ampm={false} : !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour);
disabled={disable} }
format="hh:mm" }}
className="!w-full" views={["hours", "minutes"]}
shouldDisableTime={(timeValue, clockType) => { placeholder="انتخاب کنید..."
if (clockType === 'hours') { onChange={(e) => {
const { idx, is_morgen } = dataChange; const hours = e.$H;
const value = data[idx][is_morgen ? 'morning_time' : 'evening_time'][0]; const minute = e.$m;
const hourSelected = value ? +value.split(':')[0] : false const handleTwoLength = (value) =>
String(value).length === 1 ? `0${value}` : value;
const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
minute
)}`;
const disableMinHour = timeStart || !value ? false : const newData = data;
(hourSelected + 1 > timeValue.$H) const { idx, is_morgen } = dataChange;
return dataChange.is_morgen ? newData[idx][is_morgen ? "morning_time" : "evening_time"][
!(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour) : timeStart ? 0 : 1
!(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour) ] = newValue;
} setValue(newValue);
}} }}
views={['hours', 'minutes']} sx={{
placeholder="انتخاب کنید..." "& .MuiFormLabel-root": {
onChange={e => { top: "-4px !important",
const hours = e.$H; },
const minute = e.$m; "& .MuiInputBase-input": { padding: "12.5px 14px" },
const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value "& .MuiOutlinedInput-notchedOutline": {
const newValue = `${handleTwoLength(hours)}:${handleTwoLength(minute)}`; border: "1px solid #D7D7D7 !important",
},
const newData = data; "& .MuiInputBase-root": {
const { idx, is_morgen } = dataChange; borderRadius: "8px !important",
newData[idx][is_morgen ? 'morning_time' : 'evening_time'][timeStart ? 0 : 1] = newValue; },
".Mui-focused": {
setValue(newValue); "& .MuiOutlinedInput-notchedOutline": {
}} border: "1px solid #5559CE !important",
sx={{ transition: "0.5s all",
'& .MuiFormLabel-root': { },
top: '-4px !important' },
}, "& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after":
'& .MuiInputBase-input': { padding: '12.5px 14px' }, {
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' }, display: "none !important",
'& .MuiInputBase-root': { },
borderRadius: '8px !important' }}
}, />
'.Mui-focused': { <p
'& .MuiOutlinedInput-notchedOutline': { className={`absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px]
border: '1px solid #5559CE !important',
transition: '0.5s all'
}
},
'& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after': {
display: 'none !important'
}
}}
/>
<p className={`absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px]
w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2 w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
${disable && '!text-[rgba(126,126,126,0.5)]'}`}>{value}</p> ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
</LocalizationProvider> >
</div> {value}
) </p>
</LocalizationProvider>
</div>
);
} }
export default TimePickerField export default TimePickerField;
app/component/comment/Field.js
+26 -24
View File
@@ -1,28 +1,30 @@
import { TextField } from "@mui/material" import { TextField } from "@mui/material";
function Field({ title, type, multiline, isPlaceHolder }) { function Field({ title, type, multiline, isPlaceHolder }) {
return ( return (
<TextField <TextField
placeholder={isPlaceHolder && title} placeholder={isPlaceHolder && title}
label={!isPlaceHolder ? title : ''} label={!isPlaceHolder ? title : ""}
type={type || 'text'} type={type || "text"}
className="!w-full !mx-auto !bg-transparent" className="!w-full !mx-auto !bg-transparent"
sx={{ sx={{
'& .MuiFormLabel-root': { "& .MuiFormLabel-root": {
top: '-4px !important' top: "-4px !important",
}, },
'& .MuiInputBase-input': { padding: '12.5px 14px' }, "& .MuiInputBase-input": { padding: "12.5px 14px" },
'& .MuiInputBase-root': { borderRadius: '6px !important' }, "& .MuiInputBase-root": { borderRadius: "6px !important" },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #EFEFEF !important' }, "& .MuiOutlinedInput-notchedOutline": {
".Mui-focused": { border: "1px solid #EFEFEF !important",
'& .MuiOutlinedInput-notchedOutline': { },
border: '1px solid #5559CE !important', ".Mui-focused": {
transition: '0.5s all' "& .MuiOutlinedInput-notchedOutline": {
} border: "1px solid #5559CE !important",
} transition: "0.5s all",
}} },
/> },
) }}
/>
);
} }
export default Field; export default Field;
app/component/comment/ItemUser.js
+170 -146
View File
@@ -9,155 +9,179 @@ import DisLikeComment from "@/components/icons/DisLikeComment";
import ArrowUpComment from "@/components/icons/ArrowUpComment"; import ArrowUpComment from "@/components/icons/ArrowUpComment";
import LikeComment from "@/components/icons/LikeComment"; import LikeComment from "@/components/icons/LikeComment";
function ItemUser({ update, setUpdate, isReply, list, setList, data, loading }) { function ItemUser({
update,
const handleLike = (lengthLike, data, nameLike, nameIsLike) => { setUpdate,
if (nameIsLike === 'is_like' && data.is_dislike) { isReply,
data.is_dislike = false; list,
data.dislike--; setList,
} else if (nameIsLike === 'is_dislike' && data.is_like) { data,
data.is_like = false; loading,
data.like--; }) {
} const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
data[nameLike] = lengthLike; if (nameIsLike === "is_like" && data.is_dislike) {
data[nameIsLike] = !data[nameIsLike]; data.is_dislike = false;
setUpdate(!update); data.dislike--;
} else if (nameIsLike === "is_dislike" && data.is_like) {
data.is_like = false;
data.like--;
} }
data[nameLike] = lengthLike;
data[nameIsLike] = !data[nameIsLike];
setUpdate(!update);
};
return ( return (
<li className="w-full"> <li className="w-full">
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
{loading ? ( {loading ? (
<Skeleton variant="circular" className="!min-w-[40px] !min-h-[40px]" /> <Skeleton
) : ( variant="circular"
<Image className="!min-w-[40px] !min-h-[40px]"
className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]" />
src={data.profile} ) : (
width={40} <Image
height={40} className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
alt="profile" src={data.profile}
/> width={40}
)} height={40}
<div className="flex flex-col items-start justify-center gap-[8px]"> alt="profile"
{loading ? ( />
<Skeleton variant="text" className="!min-w-[70px]" /> )}
) : ( <div className="flex flex-col items-start justify-center gap-[8px]">
<> {loading ? (
<p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">{data.name}</p> <Skeleton variant="text" className="!min-w-[70px]" />
<p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">3 روز پیش</p> ) : (
</> <>
)} <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
</div> {data.name}
</p>
<p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
3 روز پیش
</p>
</>
)}
</div>
</div>
<div className="mt-2">
{loading ? (
<>
<Skeleton variant="text" className="!w-full !mt-8" />
<Skeleton variant="text" className="!w-1/3" />
</>
) : (
<p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">
{data.comment}
</p>
)}
<div className="flex items-center justify-start mt-2 gap-[28px]">
<div className="flex items-center justify-start gap-1">
<div
className="cursor-pointer"
onClick={() =>
handleLike(
data.is_like ? data.like - 1 : data.like + 1,
data,
"like",
"is_like"
)
}
>
{data.is_like ? <BoldLikeComment /> : <LikeComment />}
</div> </div>
<div className="mt-2"> {loading ? (
{loading ? ( <Skeleton variant="text" className="!min-w-[8px]" />
<> ) : (
<Skeleton variant="text" className="!w-full !mt-8" /> <p className="text-[#6C757D] text-[12px] font-normal select-none">
<Skeleton variant="text" className="!w-1/3" /> {data.like}
</> </p>
) : ( )}
<p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p> </div>
)} <div className="flex items-center justify-start gap-1">
<div className="flex items-center justify-start mt-2 gap-[28px]"> <div
<div className="flex items-center justify-start gap-1"> className="cursor-pointer"
<div onClick={() =>
className="cursor-pointer" handleLike(
onClick={() => data.is_dislike ? data.dislike - 1 : data.dislike + 1,
handleLike(data.is_like ? data.like - 1 : data.like + 1, data, 'like', 'is_like') data,
} "dislike",
> "is_dislike"
{data.is_like ? ( )
<BoldLikeComment /> }
) : ( >
<LikeComment /> {data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
)} </div>
</div> {loading ? (
{loading ? ( <Skeleton variant="text" className="!min-w-[8px]" />
<Skeleton variant="text" className="!min-w-[8px]" /> ) : (
) : ( <p className="text-[#6C757D] text-[12px] font-normal select-none">
<p className="text-[#6C757D] text-[12px] font-normal select-none">{data.like}</p> {data.dislike}
)} </p>
</div> )}
<div className="flex items-center justify-start gap-1"> </div>
<div <Button
className="cursor-pointer" className="!text-[#495057] !text-[12px] !font-medium"
onClick={() => onClick={() => {
handleLike(data.is_dislike ? data.dislike - 1 : data.dislike + 1, data, 'dislike', 'is_dislike') data.is_open_answer = !data.is_open_answer;
} setUpdate(!update);
> }}
{data.is_dislike ? ( variant="text"
<BoldDisLikeComment /> >
) : ( پاسخ
<DisLikeComment /> </Button>
)} </div>
</div> <div
{loading ? ( className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
<Skeleton variant="text" className="!min-w-[8px]" /> ${data.is_open_answer ? "max-h-fit" : "max-h-0"}`}
) : ( >
<p className="text-[#6C757D] text-[12px] font-normal select-none">{data.dislike}</p> <Field type="text" title="پاسخ شما..." isPlaceHolder={true} />
)} <Button
</div> variant="contained"
<Button className="!p-2 !h-10 !text-[12px] !font-medium !text-[#FFF] sm:!py-[10px] md:!px-[12px] !rounded-[8px] !bg-[#5559CE]
className="!text-[#495057] !text-[12px] !font-medium"
onClick={() => {
data.is_open_answer = !data.is_open_answer;
setUpdate(!update);
}}
variant="text"
>پاسخ</Button>
</div>
<div
className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
${data.is_open_answer ? 'max-h-fit' : 'max-h-0'}`}
>
<Field
type='text'
title='پاسخ شما...'
isPlaceHolder={true}
/>
<Button
variant="contained"
className="!p-2 !h-10 !text-[12px] !font-medium !text-[#FFF] sm:!py-[10px] md:!px-[12px] !rounded-[8px] !bg-[#5559CE]
!shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]" !shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
> >
ارسال پاسخ ارسال پاسخ
</Button> </Button>
</div> </div>
{!!data.replays.length && ( {!!data.replays.length && (
<div className="flex items-center justify-start gap-1 my-2"> <div className="flex items-center justify-start gap-1 my-2">
<Button <Button
className="!text-[#0FA1B3] !text-[12px] !font-medium" className="!text-[#0FA1B3] !text-[12px] !font-medium"
onClick={() => { onClick={() => {
data.is_open_reply = !data.is_open_reply; data.is_open_reply = !data.is_open_reply;
setUpdate(!update); setUpdate(!update);
}} }}
> >
مشاهده پاسخ ها ({data.replays.length}) مشاهده پاسخ ها ({data.replays.length})
<div className={`!mr-1 ${data.is_open_reply ? '!rotate-0' : '!rotate-180'}`}> <div
<ArrowUpComment /> className={`!mr-1 ${
</div> data.is_open_reply ? "!rotate-0" : "!rotate-180"
</Button> }`}
</div> >
)} <ArrowUpComment />
<ul </div>
className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 </Button>
${loading && 'w-full'} </div>
${data.is_open_reply ? 'max-h-screen mt-12' : 'max-h-0'}`} )}
> <ul
{data.replays.map((item, idx) => ( className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
<ItemUser ${loading && "w-full"}
key={idx} ${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
data={item} >
isReply={true} {data.replays.map((item, idx) => (
update={update} <ItemUser
loading={loading} key={idx}
setUpdate={setUpdate} data={item}
/> isReply={true}
))} update={update}
</ul> loading={loading}
</div> setUpdate={setUpdate}
</li> />
) ))}
</ul>
</div>
</li>
);
} }
export default ItemUser export default ItemUser;
app/component/comment/index.js
+27 -22
View File
@@ -1,27 +1,32 @@
'use client'; "use client";
import { useState } from 'react'; import { useState } from "react";
import ItemUser from './ItemUser' import ItemUser from "./ItemUser";
function Comment({ data, loading }) { function Comment({ data, loading }) {
const [list, setList] = useState(data.comments);
const [update, setUpdate] = useState(false);
const [list, setList] = useState(data.comments); return (
const [update, setUpdate] = useState(false); <ul
className={`flex flex-col comment-list !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${
return ( false && "w-full"
<ul className={`flex flex-col comment-list !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${false && 'w-full'}`}> }`}
{data && !!data.comments.length && data.comments.map((item, idx) => ( >
<ItemUser {data &&
key={idx} !!data.comments.length &&
list={list} data.comments.map((item, idx) => (
data={item} <ItemUser
update={update} key={idx}
setList={setList} list={list}
loading={loading} data={item}
setUpdate={setUpdate} update={update}
/> setList={setList}
))} loading={loading}
</ul> setUpdate={setUpdate}
) />
))}
</ul>
);
} }
export default Comment; export default Comment;
app/component/date/datePicker/ButtonDate.js
+12 -12
View File
@@ -1,16 +1,16 @@
import { Button as ButtonMUI } from '@mui/material' import { Button as ButtonMUI } from "@mui/material";
import React from 'react' import React from "react";
function ButtonDate({ handleClick, id, text }) { function ButtonDate({ handleClick, id, text }) {
return ( return (
<ButtonMUI <ButtonMUI
onClick={handleClick} onClick={handleClick}
aria-describedby={id} aria-describedby={id}
className="!border-[#E9ECEF] !text-[#6C757D]" className="!border-[#E9ECEF] !text-[#6C757D]"
> >
{text} {text}
</ButtonMUI> </ButtonMUI>
) );
} }
export default ButtonDate export default ButtonDate;
app/component/date/datePicker/Field.js
+34 -28
View File
@@ -1,32 +1,38 @@
import { TextField } from "@mui/material" import { TextField } from "@mui/material";
function Field({ title, handleClick }) { function Field({ title, handleClick }) {
return ( return (
<div className="relative"> <div className="relative">
<TextField <TextField
label={title} label={title}
className="!w-full !mx-auto !bg-[#FFF]" className="!w-full !mx-auto !bg-[#FFF]"
sx={{ sx={{
borderRadius: '8px !important', borderRadius: "8px !important",
'& .MuiFormLabel-root': { transform: 'translate(16px, 50%) scale(1) !important' }, "& .MuiFormLabel-root": {
'& .MuiInputLabel-shrink': { transform: 'translate(14px, -9px) scale(0.75) !important' }, transform: "translate(16px, 50%) scale(1) !important",
'& .MuiInputBase-input': { padding: '12.5px 14px' }, },
'& .MuiInputBase-root': { borderRadius: '8px !important' }, "& .MuiInputLabel-shrink": {
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' }, transform: "translate(14px, -9px) scale(0.75) !important",
".Mui-focused": { },
'& .MuiOutlinedInput-notchedOutline': { "& .MuiInputBase-input": { padding: "12.5px 14px" },
border: '1px solid #0FA1B3 !important', "& .MuiInputBase-root": { borderRadius: "8px !important" },
transition: '0.5s all' "& .MuiOutlinedInput-notchedOutline": {
} border: "1px solid #E9ECEF !important",
} },
}} ".Mui-focused": {
/> "& .MuiOutlinedInput-notchedOutline": {
<span border: "1px solid #0FA1B3 !important",
className="absolute cursor-pointer left-0 top-0 w-full h-full" transition: "0.5s all",
onClick={handleClick} },
></span> },
</div> }}
) />
<span
className="absolute cursor-pointer left-0 top-0 w-full h-full"
onClick={handleClick}
></span>
</div>
);
} }
export default Field export default Field;
app/component/date/datePicker/index.js
+83 -84
View File
@@ -1,98 +1,97 @@
'use client'; "use client";
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from "react";
import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker"; import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
import Image from 'next/image'; import Image from "next/image";
import { Button, Skeleton } from '@mui/material'; import { Button, Skeleton } from "@mui/material";
function DatePicker({ date, updateDate }) { function DatePicker({ date, updateDate }) {
const nextIconDatePicker = useRef();
const nextIconDatePicker = useRef(); const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState();
const [loading, setLoading] = useState(true);
const [startDate, setStartDate] = useState(null); const handleStartDateChange = (date) => {
const [endDate, setEndDate] = useState(); if (date) {
const [loading, setLoading] = useState(true); setStartDate(date);
setEndDate(null); // Clear end date if start date is selected
const handleStartDateChange = (date) => { // updateDate(date); // Notify parent about the selected date
if (date) {
setStartDate(date);
setEndDate(null); // Clear end date if start date is selected
// updateDate(date); // Notify parent about the selected date
}
};
const handleEndDateChange = (date) => {
if (date) {
setEndDate(date);
setStartDate(null); // Clear start date if end date is selected
// updateDate(date); // Notify parent about the selected date
}
};
const handleDisableDate = e => {
const today = new Date();
return today >= e._d
} }
};
useEffect(() => { const handleEndDateChange = (date) => {
if (nextIconDatePicker.current) { if (date) {
nextIconDatePicker.current.click() setEndDate(date);
setLoading(false) setStartDate(null); // Clear start date if end date is selected
} // updateDate(date); // Notify parent about the selected date
}, [nextIconDatePicker]) }
};
return ( const handleDisableDate = (e) => {
<div className='flex items-start justify-evenly w-full'> const today = new Date();
<div className='w-1/2 relative flex justify-center'> return today >= e._d;
<DatePickerJalali };
value={startDate}
className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`} useEffect(() => {
timePicker={false} if (nextIconDatePicker.current) {
onChange={handleStartDateChange} nextIconDatePicker.current.click();
disabledDates={e => handleDisableDate(e)} setLoading(false);
}
}, [nextIconDatePicker]);
return (
<div className="flex items-start justify-evenly w-full">
<div className="w-1/2 relative flex justify-center">
<DatePickerJalali
value={startDate}
className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
timePicker={false}
onChange={handleStartDateChange}
disabledDates={(e) => handleDisableDate(e)}
/>
{loading && (
<Skeleton
variant="rectangular"
className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
height={352}
/>
)}
</div>
<div className="w-1/2 hidden md:flex lg:hidden xl:flex">
<div className="w-full relative flex justify-center">
<DatePickerJalali
value={endDate}
timePicker={false}
className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
nextIcon={
<Button
className="!min-w-0 !p-0 !rounded-full"
ref={nextIconDatePicker}
onClick={(e) => e.preventDefault()}
>
<Image
src="/assets/icons/arrow-right.svg"
className="icon-left-datepicker"
height={24}
width={24}
/> />
{loading && ( </Button>
<Skeleton }
variant="rectangular" onChange={handleEndDateChange}
className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10' disabledDates={(e) => handleDisableDate(e)}
height={352} />
/> {loading && (
)} <Skeleton
</div> variant="rectangular"
<div className='w-1/2 hidden md:flex lg:hidden xl:flex'> className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
<div className='w-full relative flex justify-center'> height={352}
<DatePickerJalali />
value={endDate} )}
timePicker={false}
className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
nextIcon={
<Button
className='!min-w-0 !p-0 !rounded-full'
ref={nextIconDatePicker}
onClick={e => e.preventDefault()}
>
<Image
src='/assets/icons/arrow-right.svg'
className='icon-left-datepicker'
height={24}
width={24}
/>
</Button>
}
onChange={handleEndDateChange}
disabledDates={e => handleDisableDate(e)}
/>
{loading && (
<Skeleton
variant="rectangular"
className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10'
height={352}
/>
)}
</div>
</div>
</div> </div>
); </div>
</div>
);
} }
export default DatePicker; export default DatePicker;
app/component/date/dateTime/Hours.js
+24 -24
View File
@@ -1,32 +1,32 @@
import { Button } from "@mui/material"; import { Button } from "@mui/material";
function Hours({ doctor, hour, setHour, value, nameHours }) { function Hours({ doctor, hour, setHour, value, nameHours }) {
return ( return (
<ul <ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]" {doctor[nameHours[value]].map((item, idx) => (
> <li key={idx}>
{doctor[nameHours[value]].map((item, idx) => ( <Button
<li onClick={() => setHour(idx)}
key={idx} disabled={!item.active}
> className={`
<Button
onClick={() => setHour(idx)}
disabled={!item.active}
className={`
!w-full !rounded-[8px] !bg-[#EFEFEF] !grid !place-items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px] !w-full !rounded-[8px] !bg-[#EFEFEF] !grid !place-items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
${idx === hour ? '!bg-[#F79463] ' : ''} ${idx === hour ? "!bg-[#F79463] " : ""}
`} `}
> >
<p className={` <p
className={`
text-[16px] font-semibold text-[#525252] text-[16px] font-semibold text-[#525252]
${item.active ? 'text-[#525252]' : 'text-[#D7D7D7]'} ${item.active ? "text-[#525252]" : "text-[#D7D7D7]"}
${idx === hour ? '!text-[#FAFAFA] ' : ''} ${idx === hour ? "!text-[#FAFAFA] " : ""}
`}>{item.hour}</p> `}
</Button> >
</li> {item.hour}
))} </p>
</ul> </Button>
) </li>
))}
</ul>
);
} }
export default Hours; export default Hours;
app/component/date/dateTime/index.js
+19 -20
View File
@@ -1,4 +1,4 @@
'use client'; "use client";
import { useState } from "react"; import { useState } from "react";
import Hours from "./Hours"; import Hours from "./Hours";
@@ -6,11 +6,10 @@ import Tabs from "../../Tabs";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import ArrowLeftB from "@/components/icons/ArrowLeftB"; import ArrowLeftB from "@/components/icons/ArrowLeftB";
const listTab = ['صبح', 'بعد از ظهر']; const listTab = ["صبح", "بعد از ظهر"];
const nameHours = ['hours_morning', 'hours_afternoon'] const nameHours = ["hours_morning", "hours_afternoon"];
function DateTime({ doctor, setStep, setIsError, locateVisit }) { function DateTime({ doctor, setStep, setIsError, locateVisit }) {
const [value, setValue] = useState(0); const [value, setValue] = useState(0);
const [hour, setHour] = useState(0); const [hour, setHour] = useState(0);
@@ -21,21 +20,21 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
<Tabs <Tabs
isSm={true} isSm={true}
style={{ style={{
'.MuiTabs-indicator': { ".MuiTabs-indicator": {
height: '4px', height: "4px",
borderRadius: '8px', borderRadius: "8px",
background: '#F17732' background: "#F17732",
}, },
'& .MuiTabs-flexContainer': { "& .MuiTabs-flexContainer": {
borderBottom: '2px solid #EFEFEF', borderBottom: "2px solid #EFEFEF",
marginBottom: '1px' marginBottom: "1px",
}, },
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': { "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
color: '#F17732 !important' color: "#F17732 !important",
},
"& .MuiButtonBase-root.Mui-selected": {
color: "#F17732 !important",
}, },
'& .MuiButtonBase-root.Mui-selected': {
color: '#F17732 !important'
}
}} }}
value={value} value={value}
listTab={listTab} listTab={listTab}
@@ -53,8 +52,8 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
className="!gap-[4px] !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]" className="!gap-[4px] !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
onClick={() => { onClick={() => {
if (locateVisit) { if (locateVisit) {
localStorage.setItem('doctor-id', doctor?.id); localStorage.setItem("doctor-id", doctor?.id);
setStep(prev => prev + 1); setStep((prev) => prev + 1);
} else { } else {
setIsError(true); setIsError(true);
} }
@@ -66,7 +65,7 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
</Button> </Button>
</div> </div>
</div> </div>
) );
} }
export default DateTime export default DateTime;
app/component/element/AutoCompleteSelect.js
+55 -57
View File
@@ -3,63 +3,61 @@ import { Autocomplete, TextField } from "@mui/material";
import { styleTextSelectRight } from "@/mui"; import { styleTextSelectRight } from "@/mui";
function AutoCompleteSelect({ list, isError, updateData, name, label }) { function AutoCompleteSelect({ list, isError, updateData, name, label }) {
return ( return (
<Autocomplete <Autocomplete
disablePortal disablePortal
options={list} options={list}
className="!w-full !rounded-lg" className="!w-full !rounded-lg"
onChange={(event) => onChange={(event) => updateData && updateData(event, name)}
updateData && sx={{
updateData(event, name) ...styleTextSelectRight,
} // Hide Icon Number
sx={{ "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
...styleTextSelectRight, {
// Hide Icon Number display: "none",
'& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': { },
display: 'none' "& input[type=number]": {
}, MozAppearance: "textfield",
'& input[type=number]': { },
MozAppearance: 'textfield' "& .MuiInputBase-root": {
}, borderRadius: 2,
'& .MuiInputBase-root': { padding: "5px 16px !important",
borderRadius: 2, },
padding: '5px 16px !important' "& .MuiOutlinedInput-notchedOutline": {
}, border: "1px solid #D7D7D7",
'& .MuiOutlinedInput-notchedOutline': { },
border: '1px solid #D7D7D7' "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
}, {
'& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline': { borderColor: "#D7D7D7 !important",
borderColor: "#D7D7D7 !important" },
}, "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
'& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': { {
border: '1px solid #5559CE !important' border: "1px solid #5559CE !important",
}, },
'& .MuiOutlinedInput-notchedOutline': { "& .MuiOutlinedInput-notchedOutline": {
border: isError ? '1px solid red !important' : '' border: isError ? "1px solid red !important" : "",
} },
}} }}
renderInput={params => renderInput={(params) => (
<TextField <TextField
fullWidth fullWidth
{...params} {...params}
InputProps={{ InputProps={{
...params.InputProps, ...params.InputProps,
endAdornment: ( endAdornment: (
<div <div className="absolute left-4">
className="absolute left-4" <BottomSelect />
> </div>
<BottomSelect /> ),
</div> }}
) placeholder={label}
}} sx={{
placeholder={label} borderRadius: "8px",
sx={{ }}
borderRadius: '8px'
}}
/>
}
/> />
) )}
/>
);
} }
export default AutoCompleteSelect export default AutoCompleteSelect;
app/component/element/Field.js
+33 -30
View File
@@ -1,35 +1,38 @@
import { TextField } from "@mui/material" import { TextField } from "@mui/material";
import { styleTextSelectRight } from "@/mui" import { styleTextSelectRight } from "@/mui";
function Field({ title, type, isPlaceHolder }) { function Field({ title, type, isPlaceHolder }) {
return ( return (
<TextField <TextField
label={title} label={title}
dir="rtl" dir="rtl"
type={type || 'text'} type={type || "text"}
className="!w-full !mx-auto !bg-[#FFF]" className="!w-full !mx-auto !bg-[#FFF]"
sx={{ sx={{
...styleTextSelectRight, ...styleTextSelectRight,
// Hide Icon Number // Hide Icon Number
'& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': { "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
display: 'none' {
}, display: "none",
'& input[type=number]': { },
MozAppearance: 'textfield' "& input[type=number]": {
}, MozAppearance: "textfield",
},
'& .MuiInputBase-input': { padding: '12.5px 14px' }, "& .MuiInputBase-input": { padding: "12.5px 14px" },
'& .MuiInputBase-root': { borderRadius: '6px !important' }, "& .MuiInputBase-root": { borderRadius: "6px !important" },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' }, "& .MuiOutlinedInput-notchedOutline": {
".Mui-focused": { border: "1px solid #E9ECEF !important",
'& .MuiOutlinedInput-notchedOutline': { },
border: '1px solid #0FA1B3 !important', ".Mui-focused": {
transition: '0.5s all' "& .MuiOutlinedInput-notchedOutline": {
} border: "1px solid #0FA1B3 !important",
} transition: "0.5s all",
}} },
/> },
) }}
/>
);
} }
export default Field export default Field;
app/component/head/index.js
+17 -11
View File
@@ -1,17 +1,23 @@
function HeadPageList({ children, title, detail }) { function HeadPageList({ children, title, detail }) {
return ( return (
<div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center"> <div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
<div className=" <div
className="
padding-responsive flex flex-col items-center gap-[25px] padding-responsive flex flex-col items-center gap-[25px]
pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)] pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px] pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px]
"> "
<p className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold">{title}</p> >
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] text-center font-normal">{detail}</p> <p className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold">
{children} {title}
</div> </p>
</div> <p className="text-[#3B3B3B] text-[14px] md:text-[16px] text-center font-normal">
) {detail}
</p>
{children}
</div>
</div>
);
} }
export default HeadPageList export default HeadPageList;
app/component/loading/Circular.js
+7 -9
View File
@@ -1,13 +1,11 @@
import { Skeleton } from '@mui/material' import { Skeleton } from "@mui/material";
function CircularLoading({ loading, width, height, children }) { function CircularLoading({ loading, width, height, children }) {
return loading ? ( return loading ? (
<Skeleton <Skeleton variant="circular" height={height} width={width} />
variant="circular" ) : (
height={height} children
width={width} );
/>
) : children
} }
export default CircularLoading export default CircularLoading;
app/component/loading/Custom.js
+12 -10
View File
@@ -1,14 +1,16 @@
import { Skeleton } from "@mui/material" import { Skeleton } from "@mui/material";
function CustomLoading({ width, height, children, loading }) { function CustomLoading({ width, height, children, loading }) {
return loading ? ( return loading ? (
<Skeleton <Skeleton
className={width === 'full' ? '!w-full' : ''} className={width === "full" ? "!w-full" : ""}
height={height} height={height}
variant="rounded" variant="rounded"
width={width} width={width}
/> />
) : children ) : (
children
);
} }
export default CustomLoading export default CustomLoading;
app/component/loading/Multiline.js
+11 -7
View File
@@ -1,14 +1,18 @@
import { Skeleton } from "@mui/material" import { Skeleton } from "@mui/material";
function MultilineLoading({ loading, width, height, children, line }) { function MultilineLoading({ loading, width, height, children, line }) {
return loading ? Array(line).fill({}).map(_ => ( return loading
<Skeleton ? Array(line)
className={`${width === 'full' ? '!w-full' : ''} !my-2`} .fill({})
.map((_) => (
<Skeleton
className={`${width === "full" ? "!w-full" : ""} !my-2`}
variant="rounded" variant="rounded"
height={height} height={height}
width={width} width={width}
/> />
)) : children ))
: children;
} }
export default MultilineLoading export default MultilineLoading;
app/component/loading/Text.js
+12 -10
View File
@@ -1,14 +1,16 @@
import { Skeleton } from '@mui/material' import { Skeleton } from "@mui/material";
function TextLoading({ loading, width, height, children }) { function TextLoading({ loading, width, height, children }) {
return loading ? ( return loading ? (
<Skeleton <Skeleton
className={width === 'full' ? '!w-full' : ''} className={width === "full" ? "!w-full" : ""}
variant="rounded" variant="rounded"
height={height} height={height}
width={width} width={width}
/> />
) : children ) : (
children
);
} }
export default TextLoading export default TextLoading;
app/component/openLocation/Content.js
+38 -34
View File
@@ -1,40 +1,44 @@
import CloseModalD from '@/components/icons/CloseModalD' import CloseModalD from "@/components/icons/CloseModalD";
import Image from 'next/image' import Image from "next/image";
const maps = [ const maps = [
{ src: '/assets/images/snapp.png', name: 'snapp' }, { src: "/assets/images/snapp.png", name: "snapp" },
{ src: '/assets/images/tapsi.png', name: 'tapsi' }, { src: "/assets/images/tapsi.png", name: "tapsi" },
{ src: '/assets/images/maps.png', name: 'maps' }, { src: "/assets/images/maps.png", name: "maps" },
{ src: '/assets/images/balad.png', name: 'balad' }, { src: "/assets/images/balad.png", name: "balad" },
{ src: '/assets/images/waze.png', name: 'waze' } { src: "/assets/images/waze.png", name: "waze" },
] ];
function Content({ handleClose }) { function Content({ handleClose }) {
return ( return (
<> <>
<div className="flex items-center justify-between"> <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> <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
<div className="cursor-pointer" onClick={handleClose}> باز شدن با
<CloseModalD /> </p>
</div> <div className="cursor-pointer" onClick={handleClose}>
</div> <CloseModalD />
<span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span> </div>
<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]"> </div>
{maps.map((item, idx) => ( <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
<li className="flex items-center flex-col justify-center gap-1"> <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]">
<Image {maps.map((item, idx) => (
className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]' <li className="flex items-center flex-col justify-center gap-1">
src={item.src} <Image
alt="icon app" className="w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]"
height={40} src={item.src}
width={40} alt="icon app"
/> height={40}
<p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p> width={40}
</li> />
))} <p className="text-[#3B3B3B] font-normal text-[14px]">
</ul> {item.name}
</> </p>
) </li>
))}
</ul>
</>
);
} }
export default Content export default Content;
app/component/openLocation/index.js
+36 -43
View File
@@ -1,52 +1,45 @@
'use client'; "use client";
import { Drawer, Modal } from "@mui/material"; import { Drawer, Modal } from "@mui/material";
import { styleDefault } from "@/mui"; import { styleDefault } from "@/mui";
import Content from "./Content"; import Content from "./Content";
function ModalOpenLocation({ open, setOpen, handleClose, children }) { function ModalOpenLocation({ open, setOpen, handleClose, children }) {
const toggleDrawer = (newOpen) => () => {
setOpen(newOpen);
};
const toggleDrawer = (newOpen) => () => { return (
setOpen(newOpen); <>
}; {/* Button Modal */}
{children}
return ( {/* Content Modal */}
<> <Modal open={open} onClose={handleClose} className="!hidden md:!flex">
{/* Button Modal */} <div
{children} style={styleDefault}
{/* Content Modal */} className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
<Modal >
open={open} <Content onClose={handleClose} />
onClose={handleClose} </div>
className="!hidden md:!flex" </Modal>
> <Drawer
<div open={open}
style={styleDefault} anchor="bottom"
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden" onClose={toggleDrawer(false)}
> className="!flex md:!hidden"
<Content onClose={handleClose} /> sx={{
</div> "& .MuiPaper-root": {
</Modal> borderRadius: "25px 25px 0px 0px !important",
<Drawer overflow: "hidden",
open={open} },
anchor="bottom" }}
onClose={toggleDrawer(false)} >
className="!flex md:!hidden" <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)]">
sx={{ <Content handleClose={handleClose} />
'& .MuiPaper-root': { </div>
borderRadius: '25px 25px 0px 0px !important', </Drawer>
overflow: 'hidden' </>
} );
}}
>
<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;
app/contact-us/page.js
+8 -8
View File
@@ -1,12 +1,12 @@
import ContactUsPage from '@/components/contactUs'; import ContactUsPage from "@/components/contactUs";
import Layout from '@/components/layout'; import Layout from "@/components/layout";
function ContactUs() { function ContactUs() {
return ( return (
<Layout title='تماس با ما' name='contact-us'> <Layout title="تماس با ما" name="contact-us">
<ContactUsPage /> <ContactUsPage />
</Layout> </Layout>
) );
} }
export default ContactUs export default ContactUs;
app/dashboard/not-found.js
+5 -5
View File
@@ -1,12 +1,12 @@
import Layout from '@/components/layout' import Layout from "@/components/layout";
import NotFoundPage from '@/components/notFound' import NotFoundPage from "@/components/notFound";
function NotFound() { function NotFound() {
return ( return (
<Layout title='404' disableFooter={true}> <Layout title="404" disableFooter={true}>
<NotFoundPage /> <NotFoundPage />
</Layout> </Layout>
) );
} }
export default NotFound export default NotFound;
app/dashboard/page.js
+28 -29
View File
@@ -1,38 +1,37 @@
'use client'; "use client";
import { useState } from 'react'; import { useState } from "react";
import userData from '@/data/userData.json'; import userData from "@/data/userData.json";
import DashboardPage from "@/components/dashboard"; import DashboardPage from "@/components/dashboard";
import UserAccountPage from "@/components/dashboard/userAccount/UserAccount"; import UserAccountPage from "@/components/dashboard/userAccount/UserAccount";
function UserAccount() { function UserAccount() {
const [value, setValue] = useState(0);
const [isOpenSide, setIsOpenSide] = useState(false);
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
const [value, setValue] = useState(0); return (
const [isOpenSide, setIsOpenSide] = useState(false); <DashboardPage
const [isTurnsDetails, setIsTurnsDetails] = useState(false); value={value}
setValue={setValue}
return ( user={userData.data}
<DashboardPage isOpenSide={isOpenSide}
value={value} setIsOpenSide={setIsOpenSide}
setValue={setValue} isTurnsDetails={isTurnsDetails}
user={userData.data} setIsTurnsDetails={setIsTurnsDetails}
isOpenSide={isOpenSide} >
setIsOpenSide={setIsOpenSide} <UserAccountPage
isTurnsDetails={isTurnsDetails} value={value}
setIsTurnsDetails={setIsTurnsDetails} setValue={setValue}
> user={userData.data}
<UserAccountPage isOpenSide={isOpenSide}
value={value} setIsOpenSide={setIsOpenSide}
setValue={setValue} isTurnsDetails={isTurnsDetails}
user={userData.data} setIsTurnsDetails={setIsTurnsDetails}
isOpenSide={isOpenSide} />
setIsOpenSide={setIsOpenSide} </DashboardPage>
isTurnsDetails={isTurnsDetails} );
setIsTurnsDetails={setIsTurnsDetails}
/>
</DashboardPage>
)
} }
export default UserAccount export default UserAccount;
app/doctor/[slug]/page.js
+8 -9
View File
@@ -1,16 +1,15 @@
import DoctorPage from "@/components/doctor"; import DoctorPage from "@/components/doctor";
import doctors from '@/data/doctors.json'; import doctors from "@/data/doctors.json";
import Layout from "@/components/layout"; import Layout from "@/components/layout";
function Doctor({ params: { slug } }) { function Doctor({ params: { slug } }) {
const doctor = doctors.find((item) => item.id === +slug);
const doctor = doctors.find(item => item.id === +slug); return (
<Layout title="دکتر ها">
return ( <DoctorPage doctor={doctor} />
<Layout title='دکتر ها'> </Layout>
<DoctorPage doctor={doctor} /> );
</Layout>
)
} }
export default Doctor export default Doctor;
app/doctors/page.js
+5 -5
View File
@@ -1,12 +1,12 @@
import DoctorsPage from '@/components/doctors'; import DoctorsPage from "@/components/doctors";
import Layout from '@/components/layout'; import Layout from "@/components/layout";
function Doctors() { function Doctors() {
return ( return (
<Layout title='دکتر ها'> <Layout title="دکتر ها">
<DoctorsPage /> <DoctorsPage />
</Layout> </Layout>
) );
} }
export default Doctors export default Doctors;
app/globals.css
+201 -196
View File
@@ -5,146 +5,146 @@
/* Font Irans Sans X */ /* Font Irans Sans X */
@font-face { @font-face {
font-family: iran-sans; font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Thin.ttf); src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Thin.ttf);
font-weight: 100; font-weight: 100;
} }
@font-face { @font-face {
font-family: iran-sans; font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBlack.ttf); src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBlack.ttf);
font-weight: 200; font-weight: 200;
} }
@font-face { @font-face {
font-family: iran-sans; font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Light.ttf); src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Light.ttf);
font-weight: 300; font-weight: 300;
} }
@font-face { @font-face {
font-family: iran-sans; font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Regular.ttf); src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Regular.ttf);
font-weight: 400; font-weight: 400;
} }
@font-face { @font-face {
font-family: iran-sans; font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Medium.ttf); src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Medium.ttf);
font-weight: 500; font-weight: 500;
} }
@font-face { @font-face {
font-family: iran-sans; font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-DemiBold.ttf); src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-DemiBold.ttf);
font-weight: 600; font-weight: 600;
} }
@font-face { @font-face {
font-family: iran-sans; font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Bold.ttf); src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Bold.ttf);
font-weight: 700; font-weight: 700;
} }
@font-face { @font-face {
font-family: iran-sans; font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBold.ttf); src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBold.ttf);
font-weight: 800; font-weight: 800;
} }
@font-face { @font-face {
font-family: iran-sans; font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Black.ttf); src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Black.ttf);
font-weight: 900; font-weight: 900;
} }
/* Font Kalame */ /* Font Kalame */
@font-face { @font-face {
font-family: kalame; font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Thin.ttf); src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Thin.ttf);
font-weight: 100; font-weight: 100;
} }
@font-face { @font-face {
font-family: kalame; font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraLight.ttf); src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraLight.ttf);
font-weight: 200; font-weight: 200;
} }
@font-face { @font-face {
font-family: kalame; font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Light.ttf); src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Light.ttf);
font-weight: 300; font-weight: 300;
} }
@font-face { @font-face {
font-family: kalame; font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Regular.ttf); src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Regular.ttf);
font-weight: 400; font-weight: 400;
} }
@font-face { @font-face {
font-family: kalame; font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Medium.ttf); src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Medium.ttf);
font-weight: 500; font-weight: 500;
} }
@font-face { @font-face {
font-family: kalame; font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-SemiBold.ttf); src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-SemiBold.ttf);
font-weight: 600; font-weight: 600;
} }
@font-face { @font-face {
font-family: kalame; font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Bold.ttf); src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Bold.ttf);
font-weight: 700; font-weight: 700;
} }
@font-face { @font-face {
font-family: kalame; font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraBold.ttf); src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraBold.ttf);
font-weight: 800; font-weight: 800;
} }
@font-face { @font-face {
font-family: kalame; font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Black.ttf); src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Black.ttf);
font-weight: 900; font-weight: 900;
} }
body { body {
font-family: iran-sans; font-family: iran-sans;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: #FAFAFA; background: #fafafa;
} }
/* Scroll */ /* Scroll */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 7px; width: 7px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #F1F1F1; background: #f1f1f1;
height: 50px; height: 50px;
border-radius: 10px; border-radius: 10px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #C1C1C1; background: #c1c1c1;
height: 50px; height: 50px;
border-radius: 20px; border-radius: 20px;
} }
.font-kalame { .font-kalame {
font-family: kalame; font-family: kalame;
} }
/* .bg-banner-home, /* .bg-banner-home,
@@ -155,317 +155,322 @@ html {
} */ } */
.bg-border-t-gradient-sign { .bg-border-t-gradient-sign {
background: linear-gradient(90deg, #E5E5E5 0%, #BABABA 48.5%, #E5E5E5 100%); background: linear-gradient(90deg, #e5e5e5 0%, #bababa 48.5%, #e5e5e5 100%);
} }
.bg-banner-home { .bg-banner-home {
background: url(../public/assets/images/banner-home.png); background: url(../public/assets/images/banner-home.png);
position: relative; position: relative;
} }
.bg-banner-footer { .bg-banner-footer {
background: url(../public/assets/images/banner-footer.png); background: url(../public/assets/images/banner-footer.png);
} }
.bg-banner-about { .bg-banner-about {
background: url(../public/assets/images/banner-about.png); background: url(../public/assets/images/banner-about.png);
} }
.bg-head-dashboard { .bg-head-dashboard {
background: url(../public/assets/images/bg-head-dashboard.png); background: url(../public/assets/images/bg-head-dashboard.png);
} }
.bg-banner-home::after, .bg-banner-home::after,
.bg-banner-stroke::after { .bg-banner-stroke::after {
content: ""; content: "";
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 40%; height: 40%;
background: url(../public/assets/images/banner-register.png); background: url(../public/assets/images/banner-register.png);
background-size: cover !important; background-size: cover !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-position: center !important; background-position: center !important;
z-index: -10; z-index: -10;
} }
.bg-banner-register { .bg-banner-register {
background: url(../public/assets/images/banner-register.png); background: url(../public/assets/images/banner-register.png);
} }
.animate-open { .animate-open {
animation: openx; animation: openx;
animation-duration: 2s; animation-duration: 2s;
} }
.hover-mode-item-speciality:hover p:first-child { .hover-mode-item-speciality:hover p:first-child {
color: #FAFAFA; color: #fafafa;
} }
.hover-mode-item-speciality:hover p:last-child { .hover-mode-item-speciality:hover p:last-child {
color: #EFEFEF; color: #efefef;
} }
.cover-head-blogs { .cover-head-blogs {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.07) 31.47%, rgba(0, 0, 0, 0.31) 59.72%, rgba(0, 0, 0, 0.70) 89.39%); background: linear-gradient(
border-radius: 16px; 180deg,
position: relative; rgba(0, 0, 0, 0) 0%,
overflow: hidden; rgba(0, 0, 0, 0.07) 31.47%,
rgba(0, 0, 0, 0.31) 59.72%,
rgba(0, 0, 0, 0.7) 89.39%
);
border-radius: 16px;
position: relative;
overflow: hidden;
} }
.cover-head-blogs img { .cover-head-blogs img {
width: 100%; width: 100%;
} }
.cover-head-blogs p { .cover-head-blogs p {
position: absolute; position: absolute;
bottom: 32px; bottom: 32px;
color: #FAFAFA; color: #fafafa;
font-weight: 700; font-weight: 700;
} }
@keyframes openx { @keyframes openx {
0% { 0% {
width: 0; width: 0;
} }
100% { 100% {
width: 85%; width: 85%;
} }
} }
.padding-responsive { .padding-responsive {
max-width: 1440px; max-width: 1440px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
} }
.hover-rotate-icon:hover svg { .hover-rotate-icon:hover svg {
transform: rotateY(360deg); transform: rotateY(360deg);
transition: 0.5s all; transition: 0.5s all;
} }
.bg-head-menu { .bg-head-menu {
background: url(../public/assets/images/bg-head-menu.png); background: url(../public/assets/images/bg-head-menu.png);
} }
.w-full-icon svg { .w-full-icon svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.res-field-account .MuiInputBase-input.MuiOutlinedInput-input { .res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
} }
/* Hidden Scroll */ /* Hidden Scroll */
.MuiPaper-root, .MuiPaper-root,
.MuiTableContainer-root { .MuiTableContainer-root {
box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important; box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important;
border-radius: 4px !important; border-radius: 4px !important;
border: 1px solid var(--colors-gray-50, #EFEFEF) !important; border: 1px solid var(--colors-gray-50, #efefef) !important;
background: var(--colors-white, #FFF) !important; background: var(--colors-white, #fff) !important;
} }
.hidden-scroll::-webkit-scrollbar-thumb, .hidden-scroll::-webkit-scrollbar-thumb,
.MuiTabs-scroller::-webkit-scrollbar-thumb, .MuiTabs-scroller::-webkit-scrollbar-thumb,
.MuiTableContainer-root::-webkit-scrollbar-thumb { .MuiTableContainer-root::-webkit-scrollbar-thumb {
background: transparent; background: transparent;
} }
.hidden-scroll::-webkit-scrollbar, .hidden-scroll::-webkit-scrollbar,
.MuiTabs-scroller::-webkit-scrollbar, .MuiTabs-scroller::-webkit-scrollbar,
.MuiTableContainer-root::-webkit-scrollbar { .MuiTableContainer-root::-webkit-scrollbar {
height: 0; height: 0;
} }
.comment-list::-webkit-scrollbar { .comment-list::-webkit-scrollbar {
height: 10px; height: 10px;
} }
.opacity-page { .opacity-page {
animation: loadPageOpacity; animation: loadPageOpacity;
animation-duration: 1s; animation-duration: 1s;
} }
.retry-icon svg { .retry-icon svg {
animation: rotate 1s; animation: rotate 1s;
} }
.table-shadow-none { .table-shadow-none {
box-shadow: none !important; box-shadow: none !important;
border-radius: 12px !important; border-radius: 12px !important;
} }
.table-rounded-8 .table-shadow-none { .table-rounded-8 .table-shadow-none {
border-radius: 8px !important; border-radius: 8px !important;
} }
.w-full-content .content-text-panel { .w-full-content .content-text-panel {
width: 100%; width: 100%;
} }
@keyframes rotate { @keyframes rotate {
from { from {
rotate: 90; rotate: 90;
} }
to { to {
rotate: -360deg; rotate: -360deg;
} }
} }
@keyframes loadPageOpacity { @keyframes loadPageOpacity {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
.padding-responsive { .padding-responsive {
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.padding-responsive { .padding-responsive {
padding-left: 52px; padding-left: 52px;
padding-right: 52px; padding-right: 52px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.padding-responsive { .padding-responsive {
padding-left: 80px; padding-left: 80px;
padding-right: 80px; padding-right: 80px;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.padding-responsive { .padding-responsive {
padding-left: 108px; padding-left: 108px;
padding-right: 108px; padding-right: 108px;
} }
} }
/* Date Picker Style */ /* Date Picker Style */
.panel-elevation { .panel-elevation {
box-shadow: none !important; box-shadow: none !important;
border: none; border: none;
outline: none; outline: none;
} }
.icon-keyboard_double_arrow_right, .icon-keyboard_double_arrow_right,
.icon-keyboard_double_arrow_left { .icon-keyboard_double_arrow_left {
display: none !important; display: none !important;
} }
.icon-chevron-right::before, .icon-chevron-right::before,
.icon-chevron-left::before { .icon-chevron-left::before {
content: "" !important; content: "" !important;
background: url(../public/assets/icons/arrow-right.svg); background: url(../public/assets/icons/arrow-right.svg);
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.icon-chevron-left::before { .icon-chevron-left::before {
rotate: 180deg; rotate: 180deg;
} }
.icon-left-datepicker { .icon-left-datepicker {
rotate: 180deg; rotate: 180deg;
} }
.panel-date-holder-item span { .panel-date-holder-item span {
/* font-family: Iran Sans !important; */ /* font-family: Iran Sans !important; */
font-size: 18px !important; font-size: 18px !important;
font-weight: 500 !important; font-weight: 500 !important;
} }
.panel-date-holder-item span:hover { .panel-date-holder-item span:hover {
color: #FF8848 !important; color: #ff8848 !important;
} }
.year-item-selected, .year-item-selected,
.month-item-selected { .month-item-selected {
background: #FF8848 !important; background: #ff8848 !important;
border-radius: 3px !important; border-radius: 3px !important;
} }
.panel-header-rtl { .panel-header-rtl {
border-bottom: none !important; border-bottom: none !important;
} }
.day-label-bar-inner-rtl div { .day-label-bar-inner-rtl div {
color: #6C757D !important; color: #6c757d !important;
} }
.panel-jalaali .days-body .not-current { .panel-jalaali .days-body .not-current {
display: none !important; display: none !important;
} }
.panel-jalaali .days-body .day.hovered span { .panel-jalaali .days-body .day.hovered span {
color: #343A40 !important; color: #343a40 !important;
} }
.panel-jalaali .days-body .day.weekend-day span { .panel-jalaali .days-body .day.weekend-day span {
color: #B71232 !important; color: #b71232 !important;
} }
.panel-jalaali .today, .panel-jalaali .today,
.panel-jalaali .highlight { .panel-jalaali .highlight {
border-radius: 50% !important; border-radius: 50% !important;
} }
.panel-jalaali .today { .panel-jalaali .today {
border: 1px solid #FF8848 !important; border: 1px solid #ff8848 !important;
} }
.panel-jalaali .highlight { .panel-jalaali .highlight {
background: #ff975d !important; background: #ff975d !important;
} }
.panel-jalaali .panel-footer-wrapper, .panel-jalaali .panel-footer-wrapper,
.panel-jalaali .panel-footer-rtl { .panel-jalaali .panel-footer-rtl {
display: none !important; display: none !important;
} }
.day.hovered.today { .day.hovered.today {
border: 1px solid #F79463; border: 1px solid #f79463;
border-radius: 50%; border-radius: 50%;
} }
.day-label-bar-inner-rtl { .day-label-bar-inner-rtl {
background: #FFF !important; background: #fff !important;
} }
.day-item-outer .day-item-chain .day { .day-item-outer .day-item-chain .day {
border-radius: 50%; border-radius: 50%;
} }
.panel-jalaali .today { .panel-jalaali .today {
border-color: transparent !important; border-color: transparent !important;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.day-label-bar-inner-rtl,
.day-label-bar-inner-rtl, .panel-jalaali,
.panel-jalaali, .panel-header-rtl,
.panel-header-rtl, .days-body {
.days-body { background: #fafafa !important;
background: #FAFAFA !important; }
}
} }
/* End Date Picker Style */ /* End Date Picker Style */
app/layout.js
+8 -6
View File
@@ -1,20 +1,22 @@
import "./globals.css"; import "./globals.css";
import ThemeRegistry from './component/ThemeRegistry'; import ThemeRegistry from "./component/ThemeRegistry";
import "jalaali-react-date-picker/lib/styles/index.css"; import "jalaali-react-date-picker/lib/styles/index.css";
export const metadata = { export const metadata = {
title: "نوبت724", title: "نوبت724",
description: "نوبت 724 - سیستم آنلاین نوبت‌دهی برای پزشکان و کلینیک‌ها. با استفاده از نوبت 724، به راحتی نوبت پزشکی خود را به صورت آنلاین رزرو کنید و از خدمات سریع و کارآمد ما بهره‌مند شوید", description:
keywords: "نوبت 724, نوبت دهی, رزرو نوبت, پزشک, پزشکی, کلینیک, بیمارستان, نوبت آنلاین, سیستم نوبت دهی, سیستم نوبت دهی آنلاین, سیستم نوبت دهی پزشکی, سیستم نوبت دهی کلینیک, سیستم نوبت دهی بیمارستان, سیستم نوبت دهی آنلاین پزشکی, سیستم نوبت دهی آنلاین کلینیک, سیستم نوبت دهی آنلاین بیمارستان", "نوبت 724 - سیستم آنلاین نوبت‌دهی برای پزشکان و کلینیک‌ها. با استفاده از نوبت 724، به راحتی نوبت پزشکی خود را به صورت آنلاین رزرو کنید و از خدمات سریع و کارآمد ما بهره‌مند شوید",
keywords:
"نوبت 724, نوبت دهی, رزرو نوبت, پزشک, پزشکی, کلینیک, بیمارستان, نوبت آنلاین, سیستم نوبت دهی, سیستم نوبت دهی آنلاین, سیستم نوبت دهی پزشکی, سیستم نوبت دهی کلینیک, سیستم نوبت دهی بیمارستان, سیستم نوبت دهی آنلاین پزشکی, سیستم نوبت دهی آنلاین کلینیک, سیستم نوبت دهی آنلاین بیمارستان",
image: "https://www.nobat724.com/assets/images/logo.png", image: "https://www.nobat724.com/assets/images/logo.png",
}; };
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="fa" dir='rtl'> <html lang="fa" dir="rtl">
<ThemeRegistry> <ThemeRegistry>
<body className='bg-[#FAFAFA]'>{children}</body> <body className="bg-[#FAFAFA]">{children}</body>
</ThemeRegistry> </ThemeRegistry>
</html> </html>
); );
}; }
app/login-verify/page.js
+19 -18
View File
@@ -1,24 +1,25 @@
'use client'; "use client";
import RegisterPage from '@/components/register'; import RegisterPage from "@/components/register";
import SetCodePage from '@/components/register/SetCodePage'; import SetCodePage from "@/components/register/SetCodePage";
import LogInPage from '@/components/register/LogInPage'; import LogInPage from "@/components/register/LogInPage";
import { useState } from 'react'; import { useState } from "react";
function LoginVerify() { function LoginVerify() {
const [isSendMsg, setIsSendMsg] = useState(false);
const [isSendMsg, setIsSendMsg] = useState(false); return (
<RegisterPage>
return ( {isSendMsg ? (
<RegisterPage> <SetCodePage
{isSendMsg ? setIsSendMsg={setIsSendMsg}
<SetCodePage link={`/account/${localStorage.getItem("doctor-id")}`}
setIsSendMsg={setIsSendMsg} />
link={`/account/${localStorage.getItem('doctor-id')}`} ) : (
/> : <LogInPage setIsSendMsg={setIsSendMsg} />
<LogInPage setIsSendMsg={setIsSendMsg} />} )}
</RegisterPage> </RegisterPage>
) );
} }
export default LoginVerify export default LoginVerify;
app/login/page.js
+18 -21
View File
@@ -1,26 +1,23 @@
'use client'; "use client";
import RegisterPage from '@/components/register'; import RegisterPage from "@/components/register";
import SetCodePage from '@/components/register/SetCodePage'; import SetCodePage from "@/components/register/SetCodePage";
import LogInPage from '@/components/register/LogInPage'; import LogInPage from "@/components/register/LogInPage";
import { useState } from 'react'; import { useState } from "react";
function LogIn() { function LogIn() {
const [isSendMsg, setIsSendMsg] = useState(false);
const [isSendMsg, setIsSendMsg] = useState(false); return (
<div>
return ( <RegisterPage>
<div> {isSendMsg ? (
<RegisterPage> <SetCodePage setIsSendMsg={setIsSendMsg} setStep={false} link="/" />
{isSendMsg ? ) : (
<SetCodePage <LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />
setIsSendMsg={setIsSendMsg} )}
setStep={false} </RegisterPage>
link='/' </div>
/> : );
<LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />}
</RegisterPage>
</div>
)
} }
export default LogIn export default LogIn;
app/not-found.js
+5 -5
View File
@@ -1,12 +1,12 @@
import Layout from '@/components/layout' import Layout from "@/components/layout";
import NotFoundPage from '@/components/notFound' import NotFoundPage from "@/components/notFound";
function NotFound() { function NotFound() {
return ( return (
<Layout title='404' disableFooter={true}> <Layout title="404" disableFooter={true}>
<NotFoundPage /> <NotFoundPage />
</Layout> </Layout>
) );
} }
export default NotFound export default NotFound;
app/page.js
+1 -1
View File
@@ -3,7 +3,7 @@ import Layout from "@/components/layout";
export default function Home() { export default function Home() {
return ( return (
<Layout title='خانه' name=''> <Layout title="خانه" name="">
<HomePage /> <HomePage />
</Layout> </Layout>
); );
app/panel/(layout)/add-doctor/page.js
+3 -5
View File
@@ -1,10 +1,8 @@
import AddDoctorPage from "@/components/panel/addDoctor"; import AddDoctorPage from "@/components/panel/addDoctor";
import Information from '@/data/information.json'; import Information from "@/data/information.json";
function AddDoctor() { function AddDoctor() {
return ( return <AddDoctorPage data={Information} />;
<AddDoctorPage data={Information} />
)
} }
export default AddDoctor export default AddDoctor;
app/panel/(layout)/dashboard/page.js
+4 -6
View File
@@ -1,12 +1,10 @@
'use client'; "use client";
import DashboardPage from "@/components/panel/dashboard"; import DashboardPage from "@/components/panel/dashboard";
import Information from '@/data/information.json'; import Information from "@/data/information.json";
function Dashboard() { function Dashboard() {
return ( return <DashboardPage data={Information} />;
<DashboardPage data={Information} />
)
} }
export default Dashboard export default Dashboard;
app/panel/(layout)/layout.js
+48 -46
View File
@@ -1,60 +1,62 @@
'use client'; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Header from "@/components/layoutPanel/header"; import Header from "@/components/layoutPanel/header";
import Sidebar from "@/components/layoutPanel/sidebar"; import Sidebar from "@/components/layoutPanel/sidebar";
import Information from '@/data/information.json'; import Information from "@/data/information.json";
import UserDetail from "@/components/layoutPanel/userDetail"; import UserDetail from "@/components/layoutPanel/userDetail";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import BgGray from "@/components/layoutPanel/sidebar/BgGray"; import BgGray from "@/components/layoutPanel/sidebar/BgGray";
function LayoutPanel({ children }) { function LayoutPanel({ children }) {
const pathname = usePathname();
const [active, setActive] = useState(false);
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(true);
const pathname = usePathname(); useEffect(() => {
const [active, setActive] = useState(false); setTimeout(() => {
const [open, setOpen] = useState(false); setLoading(false);
const [loading, setLoading] = useState(true); }, 2000);
}, []);
useEffect(() => { return (
setTimeout(() => { <div className="flex min-h-screen">
setLoading(false); <Sidebar
}, 2000); open={open}
}, []); active={active}
setOpen={setOpen}
setActive={setActive}
return ( />
<div className="flex min-h-screen"> <BgGray isActive={active} setIsActive={setActive} />
<Sidebar <main
open={open} className={`
active={active}
setOpen={setOpen}
setActive={setActive}
/>
<BgGray isActive={active} setIsActive={setActive} />
<main className={`
w-full transition-all duration-500 w-full transition-all duration-500
${pathname.includes('dashboard') ? ${
(open ? pathname.includes("dashboard")
'md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]' : ? open
'md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]' ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
) : (open ? : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
'md:w-[calc(100%-243px)]' : : open
'md:w-[calc(100%-96px)]')} ? "md:w-[calc(100%-243px)]"
`}> : "md:w-[calc(100%-96px)]"
<Header }
data={Information} `}
setActive={setActive} >
disableProfile={pathname.includes('dashboard')} <Header
/> data={Information}
<section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]"> setActive={setActive}
{children} disableProfile={pathname.includes("dashboard")}
</section> />
</main> <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
{pathname.includes('dashboard') && ( {children}
<UserDetail data={Information} loading={loading} /> </section>
)} </main>
</div> {pathname.includes("dashboard") && (
) <UserDetail data={Information} loading={loading} />
)}
</div>
);
} }
export default LayoutPanel export default LayoutPanel;
app/panel/(layout)/turns/page.js
+4 -6
View File
@@ -1,10 +1,8 @@
import TurnsPage from '@/components/panel/turns' import TurnsPage from "@/components/panel/turns";
import Information from '@/data/information.json'; import Information from "@/data/information.json";
function page() { function page() {
return ( return <TurnsPage data={Information} />;
<TurnsPage data={Information} />
)
} }
export default page export default page;
app/panel/(layout)/user-account/page.js
+4 -6
View File
@@ -1,10 +1,8 @@
import UserAccountPage from "@/components/panel/userAccount" import UserAccountPage from "@/components/panel/userAccount";
import Information from '@/data/information.json'; import Information from "@/data/information.json";
function UserAccount() { function UserAccount() {
return ( return <UserAccountPage data={Information} />;
<UserAccountPage data={Information} />
)
} }
export default UserAccount export default UserAccount;
app/specialties/page.js
+8 -8
View File
@@ -1,12 +1,12 @@
import Layout from '@/components/layout'; import Layout from "@/components/layout";
import SpecialtiesPage from '@/components/specialties'; import SpecialtiesPage from "@/components/specialties";
function Specialties() { function Specialties() {
return ( return (
<Layout title='تخصص ها' name='specialties'> <Layout title="تخصص ها" name="specialties">
<SpecialtiesPage /> <SpecialtiesPage />
</Layout> </Layout>
) );
} }
export default Specialties export default Specialties;
app/theme/theme.js
+32 -32
View File
@@ -1,39 +1,39 @@
'use client'; "use client";
import { createTheme } from '@mui/material/styles'; import { createTheme } from "@mui/material/styles";
const theme = createTheme({ const theme = createTheme({
direction: 'rtl', direction: "rtl",
typography: { typography: {
fontFamily: 'iran-sans', fontFamily: "iran-sans",
},
components: {
MuiButton: {
styleOverrides: {
root: {
whiteSpace: "nowrap",
minWidth: "0",
padding: "9px 18px",
fontSize: "16px",
fontStyle: "normal",
fontWeight: "500",
},
},
}, },
components: { },
MuiButton: { palette: {
styleOverrides: { primary: {
root: { main: "#5559CE",
whiteSpace: 'nowrap', contrastText: "#EFEFEF",
minWidth: '0',
padding: '9px 18px',
fontSize: '16px',
fontStyle: 'normal',
fontWeight: '500',
},
},
},
}, },
palette: { secondary: {
primary: { main: "#FAFAFA",
main: "#5559CE", contrastText: "#616161",
contrastText: "#EFEFEF", },
}, success: {
secondary: { main: "#FFB800",
main: "#FAFAFA", contrastText: "#FFF",
contrastText: "#616161", },
}, },
success: {
main: "#FFB800",
contrastText: "#FFF",
}
}
}); });
export default theme; export default theme;
components/aboutUs/Head.js
+16 -14
View File
@@ -1,18 +1,20 @@
import Image from 'next/image' import Image from "next/image";
import React from 'react' import React from "react";
function Head() { function Head() {
return ( 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]'> <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 <Image
src='/assets/images/logo-2.png' src="/assets/images/logo-2.png"
height={46} height={46}
width={46} width={46}
alt='logo' alt="logo"
/> />
<p className="text-[#FAFAFA] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-bold">درباره نوبت ۷۲۴</p> <p className="text-[#FAFAFA] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-bold">
</div> درباره نوبت ۷۲۴
) </p>
</div>
);
} }
export default Head export default Head;
components/aboutUs/Services.js
+31 -34
View File
@@ -1,40 +1,37 @@
import AnimationTextHead from '@/app/component/AnimationTextHead'; import AnimationTextHead from "@/app/component/AnimationTextHead";
import UnderlineLG from '../icons/UnderlineLG'; import UnderlineLG from "../icons/UnderlineLG";
import TickOrangeA from '../icons/TickOrangeA'; import TickOrangeA from "../icons/TickOrangeA";
const ourServices = [ const ourServices = [
'جستجوی سریع پزشک ', "جستجوی سریع پزشک ",
'جستجوی کلینیک و مراکز درمانی', "جستجوی کلینیک و مراکز درمانی",
'نوبت گیری راحت و آسان', "نوبت گیری راحت و آسان",
'دشبورد تخصصی بیمار', "دشبورد تخصصی بیمار",
'دشبورد تخصصی پزشک', "دشبورد تخصصی پزشک",
'نوبت گیری راحت و آسان' "نوبت گیری راحت و آسان",
] ];
function Services() { function Services() {
return ( return (
<div className='mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]'> <div className="mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]">
<div className='flex justify-center'> <div className="flex justify-center">
<AnimationTextHead name='zoom-in-up' text='خدمات ما'> <AnimationTextHead name="zoom-in-up" text="خدمات ما">
<UnderlineLG /> <UnderlineLG />
</AnimationTextHead> </AnimationTextHead>
</div> </div>
<ul <ul
className='mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px] 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' 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) => ( {ourServices.map((item, idx) => (
<li <li key={idx} className="flex items-start justify-start gap-[8px]">
key={idx} <TickOrangeA />
className='flex items-start justify-start gap-[8px]' <p className="text-[#525252] text-[16px] font-medium">{item}</p>
> </li>
<TickOrangeA /> ))}
<p className='text-[#525252] text-[16px] font-medium'>{item}</p> </ul>
</li> </div>
))} );
</ul>
</div>
)
} }
export default Services export default Services;
components/aboutUs/index.js
+23 -12
View File
@@ -2,23 +2,34 @@ import Head from "./Head";
import Services from "./Services"; import Services from "./Services";
function AboutUsPage() { function AboutUsPage() {
return ( return (
<div <div
className=" className="
pt-[24px] sm:pt-[56px] md:pt-[88px] lg:pt-[120px] mt-[56px] pt-[24px] sm:pt-[56px] md:pt-[88px] lg:pt-[120px] mt-[56px]
px-0 md:px-[80px] lg:px-[108px] px-0 md:px-[80px] lg:px-[108px]
" "
> >
<Head /> <Head />
<p <p
className=" className="
text-[#525252] text-[16px] font-normal mt-[32px] leading-[24px] md:leading-[32px] lg:leading-[40px] 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 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;
components/blog/detail/Caption.js
+43 -43
View File
@@ -1,47 +1,47 @@
import CustomLoading from '@/app/component/loading/Custom' import CustomLoading from "@/app/component/loading/Custom";
import MultilineLoading from '@/app/component/loading/Multiline' import MultilineLoading from "@/app/component/loading/Multiline";
import Image from 'next/image' import Image from "next/image";
import React from 'react' import React from "react";
function Caption({ data, loading }) { function Caption({ data, loading }) {
return ( return (
<> <>
<CustomLoading loading={loading} width='full' height={500}> <CustomLoading loading={loading} width="full" height={500}>
<Image <Image
className="rounded-[8px] overflow-hidden w-full" className="rounded-[8px] overflow-hidden w-full"
src={data.cover_first} src={data.cover_first}
alt="cover-blog" alt="cover-blog"
height={570} height={570}
width={808} width={808}
/> />
</CustomLoading> </CustomLoading>
<div className={loading ? 'my-4' : ''}> <div className={loading ? "my-4" : ""}>
<MultilineLoading loading={loading} width='full' height={18} line={20}> <MultilineLoading loading={loading} width="full" height={18} line={20}>
<div <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]" 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 }} dangerouslySetInnerHTML={{ __html: data.caption }}
/> />
</MultilineLoading> </MultilineLoading>
</div> </div>
<CustomLoading loading={loading} width='full' height={500}> <CustomLoading loading={loading} width="full" height={500}>
<Image <Image
className="rounded-[8px] overflow-hidden w-full" className="rounded-[8px] overflow-hidden w-full"
src={data.cover_second} src={data.cover_second}
alt="cover-blog" alt="cover-blog"
height={570} height={570}
width={808} width={808}
/> />
</CustomLoading> </CustomLoading>
<div className={loading ? 'my-4' : ''}> <div className={loading ? "my-4" : ""}>
<MultilineLoading loading={loading} width='full' height={18} line={20}> <MultilineLoading loading={loading} width="full" height={18} line={20}>
<div <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]" 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 }} dangerouslySetInnerHTML={{ __html: data.caption }}
/> />
</MultilineLoading> </MultilineLoading>
</div> </div>
</> </>
) );
} }
export default Caption export default Caption;
components/blog/detail/SocialMedia.js
+21 -25
View File
@@ -1,30 +1,26 @@
import CircularLoading from "@/app/component/loading/Circular" import CircularLoading from "@/app/component/loading/Circular";
import LinkedinB from "@/components/icons/LinkedinB" import LinkedinB from "@/components/icons/LinkedinB";
import TelegramB from "@/components/icons/TelegramB" import TelegramB from "@/components/icons/TelegramB";
import WhatsappB from "@/components/icons/WhatsappB" import WhatsappB from "@/components/icons/WhatsappB";
const socials = [ const socials = [<WhatsappB />, <TelegramB />, <LinkedinB />];
<WhatsappB />,
<TelegramB />,
<LinkedinB />
]
function SocialMedia({ loading }) { function SocialMedia({ loading }) {
return ( 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"> <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) => ( {socials.map((item, idx) => (
<CircularLoading width={36} height={36} loading={loading}> <CircularLoading width={36} height={36} loading={loading}>
<li <li
key={idx} key={idx}
className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]" className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
> >
{item} {item}
</li> </li>
</CircularLoading> </CircularLoading>
))} ))}
<span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span> <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
</ul> </ul>
) );
} }
export default SocialMedia export default SocialMedia;
components/blog/detail/commentUser/AddComment.js
+17 -15
View File
@@ -1,19 +1,21 @@
import { Button } from '@mui/material' import { Button } from "@mui/material";
import React from 'react' import React from "react";
function AddComment() { function AddComment() {
return ( 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]'> <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> <p className="text-[#616161] text-[16px] font-normal">
<Button شما هم نظر خود را به اشتراک بگذارید:
variant='outlined' </p>
className='!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] <Button
!px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]' 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> ثبت نظر
) </Button>
</div>
);
} }
export default AddComment export default AddComment;
components/blog/detail/commentUser/index.js
+15 -15
View File
@@ -1,19 +1,19 @@
import AnimationTextHead from '@/app/component/AnimationTextHead' import AnimationTextHead from "@/app/component/AnimationTextHead";
import Comment from '@/app/component/comment' import Comment from "@/app/component/comment";
import Underline from '@/components/icons/Underline' import Underline from "@/components/icons/Underline";
import React from 'react' import React from "react";
import AddComment from './AddComment' import AddComment from "./AddComment";
function CommentUser({ data, loading }) { function CommentUser({ data, loading }) {
return ( return (
<div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'> <div className="mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
<AnimationTextHead name='zoom-in-up' text='نظرات'> <AnimationTextHead name="zoom-in-up" text="نظرات">
<Underline /> <Underline />
</AnimationTextHead> </AnimationTextHead>
<AddComment /> <AddComment />
<Comment data={data} loading={loading} /> <Comment data={data} loading={loading} />
</div> </div>
) );
} }
export default CommentUser export default CommentUser;
components/blog/detail/index.js
+8 -8
View File
@@ -3,13 +3,13 @@ import SocialMedia from "./SocialMedia";
import CommentUser from "./commentUser"; import CommentUser from "./commentUser";
function Detail({ data, loading }) { function Detail({ data, loading }) {
return ( return (
<div className="w-full lg:w-[68%]"> <div className="w-full lg:w-[68%]">
<Caption data={data} loading={loading} /> <Caption data={data} loading={loading} />
<SocialMedia loading={loading} /> <SocialMedia loading={loading} />
<CommentUser data={data} loading={loading} /> <CommentUser data={data} loading={loading} />
</div> </div>
) );
} }
export default Detail export default Detail;
components/blog/head/index.js
+51 -31
View File
@@ -1,36 +1,56 @@
import TextLoading from "@/app/component/loading/Text" import TextLoading from "@/app/component/loading/Text";
function Head({ data, loading }) { function Head({ data, loading }) {
return ( return (
<div> <div>
<TextLoading width={200} height={18} loading={loading}> <TextLoading width={200} height={18} loading={loading}>
<div className="flex items-center justify-start gap-1"> <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 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> </p>
</div> <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
</TextLoading> پوست و مو {">"}
<div className={loading ? 'mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]' : ''}> </p>
<TextLoading width={250} height={22} loading={loading}> <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
<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> </p>
</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> </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;
components/blog/index.js
+17 -18
View File
@@ -1,4 +1,4 @@
'use client' "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Detail from "./detail"; import Detail from "./detail";
@@ -6,24 +6,23 @@ import Head from "./head";
import RelatedContent from "./relatedContent"; import RelatedContent from "./relatedContent";
function BlogPage({ article, articles }) { function BlogPage({ article, articles }) {
const [loading, setLoading] = useState(true);
const [loading, setLoading] = useState(true); useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
useEffect(() => { return (
setTimeout(() => { <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
setLoading(false); <Head data={article} loading={loading} />
}, 2000); <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} />
return ( </div>
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]"> </div>
<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;
components/blog/relatedContent/Item.js
+33 -33
View File
@@ -5,42 +5,42 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
function Item({ data, idx, loading }) { function Item({ data, idx, loading }) {
return ( return (
<li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]"> <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}> <CustomLoading width={80} height={72} loading={loading}>
<Link href={`/blog/${data.id}`}> <Link href={`/blog/${data.id}`}>
<Image <Image
className=" className="
min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px] 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] min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px]
rounded-[8px] overflow-hidden object-cover rounded-[8px] overflow-hidden object-cover
" "
src={data.src} src={data.src}
alt="article" alt="article"
height={88} height={88}
width={97} width={97}
/> />
</Link> </Link>
</CustomLoading> </CustomLoading>
<div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between"> <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}> <TextLoading width={150} height={18} loading={loading}>
<Link href={`/blog/${data.id}`}> <Link href={`/blog/${data.id}`}>
<p <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap" {data.title}
>{data.title}</p> </p>
</Link> </Link>
</TextLoading> </TextLoading>
<TextLoading width={110} height={18} loading={loading}> <TextLoading width={110} height={18} loading={loading}>
<p <p className="text-[#9B9B9B] text-[12px] text-nowrap font-normal">
className="text-[#9B9B9B] text-[12px] text-nowrap font-normal" تاریخ انتشار: {data.date_of_release}
>تاریخ انتشار: {data.date_of_release}</p> </p>
</TextLoading> </TextLoading>
</div> </div>
{data.id > idx + 1 && ( {data.id > idx + 1 && (
<span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span> <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
)} )}
</li> </li>
) );
} }
export default Item export default Item;
components/blog/relatedContent/index.js
+10 -15
View File
@@ -1,26 +1,21 @@
import AnimationTextHead from '@/app/component/AnimationTextHead' import AnimationTextHead from "@/app/component/AnimationTextHead";
import UnderlineLG from '@/components/icons/UnderlineLG' import UnderlineLG from "@/components/icons/UnderlineLG";
import React from 'react' import React from "react";
import Item from './Item' import Item from "./Item";
function RelatedContent({ data, loading }) { function RelatedContent({ data, loading }) {
return ( 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)]'> <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='مطالب مرتبط'> <AnimationTextHead name="fade-up" text="مطالب مرتبط">
<UnderlineLG /> <UnderlineLG />
</AnimationTextHead> </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) => ( {data.map((item, idx) => (
<Item <Item idx={idx} data={item} key={item.id} loading={loading} />
idx={idx}
data={item}
key={item.id}
loading={loading}
/>
))} ))}
</ul> </ul>
</div> </div>
) );
} }
export default RelatedContent export default RelatedContent;
components/blogs/Head.js
+104 -72
View File
@@ -1,77 +1,109 @@
import CustomLoading from '@/app/component/loading/Custom' import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from '@/app/component/loading/Text' import TextLoading from "@/app/component/loading/Text";
import Image from 'next/image' import Image from "next/image";
import Link from 'next/link' import Link from "next/link";
function Head({ loading }) { function Head({ loading }) {
return ( 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]'> <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'> <Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
<CustomLoading loading={loading} width='full' height={400}> <CustomLoading loading={loading} width="full" height={400}>
<Image <Image
src='/assets/images/head-blogs-1.png' src="/assets/images/head-blogs-1.png"
width={600} width={600}
height={424} height={424}
alt='head blog' alt="head blog"
/> />
</CustomLoading> </CustomLoading>
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}> <div
<TextLoading width={150} height={20} loading={loading}> className={
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p> loading
</TextLoading> ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
</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]'> <TextLoading width={150} height={20} loading={loading}>
<Link href='#' className='w-full cover-head-blogs'> <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
<CustomLoading loading={loading} width='full' height={180}> روش های خانگی محافظت از پوست در تابستان
<Image </p>
src='/assets/images/head-blogs-2.png' </TextLoading>
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> </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;
components/blogs/index.js
+15 -16
View File
@@ -1,4 +1,4 @@
'use client'; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -7,22 +7,21 @@ import Title from "./title";
import LatestArticles from "./latestArticles"; import LatestArticles from "./latestArticles";
function BlogsPage() { function BlogsPage() {
const [loading, setLoading] = useState(true);
const [loading, setLoading] = useState(true); useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
useEffect(() => { return (
setTimeout(() => { <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
setLoading(false); <Title />
}, 2000); <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;
components/blogs/latestArticles/Article.js
+43 -37
View File
@@ -1,41 +1,47 @@
import CustomLoading from '@/app/component/loading/Custom'; import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from '@/app/component/loading/Text'; import TextLoading from "@/app/component/loading/Text";
import Image from 'next/image' import Image from "next/image";
import Link from 'next/link'; import Link from "next/link";
function Article({ data, loading }) { function Article({ data, loading }) {
return ( return (
<li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'> <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}> <CustomLoading width="full" height={200} loading={loading}>
<Link href={`/blog/${data.id}`}> <Link href={`/blog/${data.id}`}>
<Image <Image
className='w-full' className="w-full"
alt="article-img" alt="article-img"
src={data.src} src={data.src}
height={217} height={217}
width={392} width={392}
/> />
</Link> </Link>
</CustomLoading> </CustomLoading>
<div className='p-[12px] md:p-[14px] lg:p-[16px]'> <div className="p-[12px] md:p-[14px] lg:p-[16px]">
<div className={loading ? 'mb-[12px] md:mb-[14px] lg:mb-[16px]' : ''}> <div className={loading ? "mb-[12px] md:mb-[14px] lg:mb-[16px]" : ""}>
<TextLoading width={150} height={18} loading={loading}> <TextLoading width={150} height={18} loading={loading}>
<Link href={`/blog/${data.id}`}> <Link href={`/blog/${data.id}`}>
<p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p> <p className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
</Link> {data.title}
</TextLoading> </p>
</div> </Link>
<div className='flex items-center justify-start gap-[35px]'> </TextLoading>
<TextLoading width={100} height={18} loading={loading}> </div>
<p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p> <div className="flex items-center justify-start gap-[35px]">
</TextLoading> <TextLoading width={100} height={18} loading={loading}>
<TextLoading width={110} height={18} loading={loading}> <p className="text-[#9B9B9B] text-[14px] font-medium">
<p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p> تاریخ انتشار: {data.date_of_release}
</TextLoading> </p>
</div> </TextLoading>
</div> <TextLoading width={110} height={18} loading={loading}>
</li> <p className="text-[#9B9B9B] text-[14px] font-medium">
) زمان مطالعه: {data.time}
</p>
</TextLoading>
</div>
</div>
</li>
);
} }
export default Article; export default Article;
components/blogs/latestArticles/index.js
+18 -20
View File
@@ -1,25 +1,23 @@
import articles from '@/data/articles.json'; import articles from "@/data/articles.json";
import Article from "./Article"; import Article from "./Article";
import Pagination from '@/app/component/Pagination'; import Pagination from "@/app/component/Pagination";
function LatestArticles({ loading }) { function LatestArticles({ loading }) {
return ( return (
<div> <div>
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p> <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
<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 => ( </p>
<Article <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
data={item} {articles.map((item) => (
key={item.id} <Article data={item} key={item.id} loading={loading} />
loading={loading} ))}
/> </ul>
))} <div className="mt-[56px] flex justify-center">
</ul> <Pagination />
<div className='mt-[56px] flex justify-center'> </div>
<Pagination /> </div>
</div> );
</div>
)
} }
export default LatestArticles export default LatestArticles;
components/blogs/title/ItemTitle.js
+19 -16
View File
@@ -1,22 +1,25 @@
import { Button } from "@mui/material" import { Button } from "@mui/material";
function ItemTitle({ name, idx, activeBtn, setActiveBtn }) { function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
return (
return ( <li>
<li> <Button
<Button className={`
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 !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)} onClick={() => setActiveBtn(idx)}
variant="contained" variant="contained"
color="secondary" color="secondary"
> >
{name} {name}
</Button> </Button>
</li> </li>
) );
} }
export default ItemTitle export default ItemTitle;
components/blogs/title/index.js
+17 -18
View File
@@ -1,26 +1,25 @@
'use client'; "use client";
import { useState } from "react"; import { useState } from "react";
import ItemTitle from "./ItemTitle"; import ItemTitle from "./ItemTitle";
const listTitle = ['سلامت روان', 'پوست و مو', 'کودک و نوجوان', 'دارو', 'تغذیه']; const listTitle = ["سلامت روان", "پوست و مو", "کودک و نوجوان", "دارو", "تغذیه"];
function Title() { 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]">
return ( {listTitle.map((name, idx) => (
<ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]"> <ItemTitle
{listTitle.map((name, idx) => ( setActiveBtn={setActiveBtn}
<ItemTitle activeBtn={activeBtn}
setActiveBtn={setActiveBtn} name={name}
activeBtn={activeBtn} idx={idx}
name={name} key={idx}
idx={idx} />
key={idx} ))}
/> </ul>
))} );
</ul>
)
} }
export default Title export default Title;
components/booking/date/PlaceVisit.js
+22 -21
View File
@@ -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 }) { function PlaceVisit({ locateVisit, setLocateVisit, isError }) {
const clinics = [
{ label: "درمانگاه رازی", id: 10 },
{ label: "درمانگاه ابوعلی", id: 20 },
{ label: "درمانگاه مرکزی", id: 30 },
];
const clinics = [ const updateData = (event) => setLocateVisit(event.target.innerText);
{ label: 'درمانگاه رازی', id: 10 },
{ label: 'درمانگاه ابوعلی', id: 20 },
{ label: 'درمانگاه مرکزی', id: 30 }
];
const updateData = event => setLocateVisit(event.target.innerText); return (
<div className="flex flex-col items-start gap-[19px] justify-start">
return ( <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
<div className="flex flex-col items-start gap-[19px] justify-start"> 1. انتخاب محل ویزیت
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">1. انتخاب محل ویزیت</p> </p>
<AutoCompleteSelect <AutoCompleteSelect
isError={isError && !locateVisit} isError={isError && !locateVisit}
updateData={updateData} updateData={updateData}
label='درمانگاه' label="درمانگاه"
list={clinics} list={clinics}
/> />
</div> </div>
) );
} }
export default PlaceVisit export default PlaceVisit;
components/booking/date/Time/SelectDatePicker.js
+3 -5
View File
@@ -1,9 +1,7 @@
import DatePicker from "@/app/component/date/datePicker" import DatePicker from "@/app/component/date/datePicker";
function SelectDatePicker() { function SelectDatePicker() {
return ( return <DatePicker />;
<DatePicker />
)
} }
export default SelectDatePicker export default SelectDatePicker;
components/booking/date/Time/index.js
+13 -11
View File
@@ -1,15 +1,17 @@
import SelectDatePicker from "./SelectDatePicker" import SelectDatePicker from "./SelectDatePicker";
function Time({ isStep }) { function Time({ isStep }) {
return ( return (
<div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start"> <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> <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
<SelectDatePicker /> 2. انتخاب روز
{!isStep && ( </p>
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div> <SelectDatePicker />
)} {!isStep && (
</div> <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;
components/booking/date/hour/index.js
+18 -16
View File
@@ -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 }) { function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
return ( return (
<div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start"> <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> <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
<DateTime 3. انتخاب ساعت
doctor={doctor} </p>
setStep={setStep} <DateTime
setIsError={setIsError} doctor={doctor}
locateVisit={locateVisit} setStep={setStep}
/> setIsError={setIsError}
{!isStep && ( locateVisit={locateVisit}
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div> />
)} {!isStep && (
</div> <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;
components/booking/date/index.js
+29 -28
View File
@@ -4,34 +4,35 @@ import Time from "./Time";
import PlaceVisit from "./PlaceVisit"; import PlaceVisit from "./PlaceVisit";
function Date({ doctor, setStep }) { function Date({ doctor, setStep }) {
const [locateVisit, setLocateVisit] = useState();
const [isError, setIsError] = useState(false);
const [locateVisit, setLocateVisit] = useState(); return (
const [isError, setIsError] = useState(false); <div className="w-full lg:w-[61%]">
<div
return ( className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF]
<div className="w-full lg:w-[61%]"> bg-transparent lg:bg-[#FFF]"
<div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] >
bg-transparent lg:bg-[#FFF]"> <PlaceVisit
<PlaceVisit setLocateVisit={setLocateVisit}
setLocateVisit={setLocateVisit} locateVisit={locateVisit}
locateVisit={locateVisit} isError={isError}
isError={isError} />
/> <Time
<Time isStep={doctor.multiwork ? locateVisit : true}
isStep={doctor.multiwork ? locateVisit : true} locateVisit={locateVisit}
locateVisit={locateVisit} />
/> <Hour
<Hour isStep={doctor.multiwork ? locateVisit : true}
isStep={doctor.multiwork ? locateVisit : true} setLocateVisit={setLocateVisit}
setLocateVisit={setLocateVisit} locateVisit={locateVisit}
locateVisit={locateVisit} setIsError={setIsError}
setIsError={setIsError} setStep={setStep}
setStep={setStep} doctor={doctor}
doctor={doctor} />
/> </div>
</div> </div>
</div> );
)
} }
export default Date export default Date;
components/booking/detail/Content.js
+7 -7
View File
@@ -1,17 +1,17 @@
function Content({ isConfirmed, children, title }) { function Content({ isConfirmed, children, title }) {
return ( 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 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 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> <p className="text-[#525252] text-[14px] font-medium">{title}</p>
{isConfirmed && ( {isConfirmed && (
<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">
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>
)} )}
</div> </div>
{children} {children}
</div> </div>
) );
} }
export default Content export default Content;
components/booking/detail/Form.js
+32 -26
View File
@@ -3,34 +3,40 @@ import EditField from "../../../app/component/EditField";
import Content from "./Content"; import Content from "./Content";
const bime = [ const bime = [
{ label: 'بیمه 1', id: 10 }, { label: "بیمه 1", id: 10 },
{ label: 'بیمه 2', id: 20 }, { label: "بیمه 2", id: 20 },
{ label: 'بیمه 3', id: 30 } { label: "بیمه 3", id: 30 },
]; ];
function Form({ changeData, data, updateSelect, isForAnother }) { function Form({ changeData, data, updateSelect, isForAnother }) {
return ( return (
<div className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start <div
justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"> className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start
<Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}> justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
<EditField changeData={changeData} data={data?.phone} name='phone' /> >
</Content> <Content title="شماره موبایل" isConfirmed={isForAnother ? false : true}>
<Content title='کد ملی'> <EditField changeData={changeData} data={data?.phone} name="phone" />
<EditField changeData={changeData} data={data?.codemeli} name='codemeli' /> </Content>
</Content> <Content title="کد ملی">
<Content title='نام و نام خانوادگی'> <EditField
<EditField changeData={changeData} data={data?.name} name='name' /> changeData={changeData}
</Content> data={data?.codemeli}
<Content title='نوع بیمه'> name="codemeli"
<AutoCompleteSelect />
updateData={updateSelect} </Content>
label='نوع بیمه' <Content title="نام و نام خانوادگی">
name='first' <EditField changeData={changeData} data={data?.name} name="name" />
list={bime} </Content>
/> <Content title="نوع بیمه">
</Content> <AutoCompleteSelect
</div> updateData={updateSelect}
) label="نوع بیمه"
name="first"
list={bime}
/>
</Content>
</div>
);
} }
export default Form export default Form;
components/booking/detail/index.js
+76 -60
View File
@@ -5,73 +5,89 @@ import ArrowLeftB from "@/components/icons/ArrowLeftB";
import ButtonFixed from "../paying/ButtonFixed"; import ButtonFixed from "../paying/ButtonFixed";
import Form from "./Form"; 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({ const changeData = (value, type, name) =>
first: '', setData({
second: '' ...data,
[name]: {
...data[name],
[type]: value,
},
}); });
const changeData = (value, type, name) => const updateSelect = (event, name) =>
setData({ setSelected({ ...selected, [name]: event.target.innerText });
...data,
[name]: {
...data[name],
[type]: value
}
});
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]' : ''}
return ( <div className="w-full lg:w-[59%]">
// ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''} <div
<div className="w-full lg:w-[59%]"> className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
<div
className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px] rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
`} `}
> >
<p className="text-[#3B3B3B] text-[20px] font-bold"> <p className="text-[#3B3B3B] text-[20px] font-bold">
{isForAnother ? 'اطلاعات کاربر جدید' : 'اطلاعات حساب کاربری'} {isForAnother ? "اطلاعات کاربر جدید" : "اطلاعات حساب کاربری"}
</p> </p>
<Form <Form
isForAnother={isForAnother} isForAnother={isForAnother}
updateSelect={updateSelect} updateSelect={updateSelect}
changeData={changeData} changeData={changeData}
data={data} data={data}
/> />
{!isForAnother && ( {!isForAnother && (
<Button <Button
className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1" className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
onClick={() => { onClick={() => {
setIsForAnother(true) setIsForAnother(true);
setData({ setData({
phone: { value: '09121056987', isEdit: false }, phone: { value: "09121056987", isEdit: false },
codemeli: { value: '1741025645', isEdit: false }, codemeli: { value: "1741025645", isEdit: false },
name: { value: 'ساغر صابری نژاد', isEdit: false } name: { value: "ساغر صابری نژاد", isEdit: false },
}); });
}} }}
> >
<AddCircleBlueA /> <AddCircleBlueA />
<p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p> <p className="text-[#5559CE] text-[16px] font-medium">
</Button> دریافت نوبت برای فرد دیگر{" "}
)} </p>
<ButtonFixed> </Button>
<Button )}
className={` <ButtonFixed>
<Button
className={`
!flex !w-full md:!w-fit !flex !w-full md:!w-fit
!gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px] !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" isForAnother
onClick={() => setStep(prev => prev + 1)} ? "!mt-0 md:!mt-[40px]"
> : "!mt-0 md:!mt-[32px]"
<p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p> }`}
<ArrowLeftB /> variant="contained"
</Button> onClick={() => setStep((prev) => prev + 1)}
</ButtonFixed> >
</div> <p className="text-[#EFEFEF] text-[16px] font-medium">
</div> ثبت اطلاعات
) </p>
<ArrowLeftB />
</Button>
</ButtonFixed>
</div>
</div>
);
} }
export default Detail export default Detail;
components/booking/failedPay/index.js
+38 -32
View File
@@ -5,40 +5,46 @@ import RefreshA from "@/components/icons/RefreshA";
import InfoCircleRedA from "@/components/icons/InfoCircleRedA"; import InfoCircleRedA from "@/components/icons/InfoCircleRedA";
function FailedPay({ setStep, fadeElement }) { function FailedPay({ setStep, fadeElement }) {
return ( return (
<div className='w-full lg:w-[59%]'> <div className="w-full lg:w-[59%]">
<div <div
className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 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]`} 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]"> <RefreshA />
<div className="flex flex-col justify-center items-center gap-[14px]"> <p className="text-[#FAFAFA] text-[16px] font-medium">
<InfoCircleRedA /> تلاش دوباره
<p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">پرداخت شما انجام نشد.</p> </p>
</div> </Button>
<div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]"> </div>
<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>
</div> </div>
) </div>
</div>
);
} }
export default FailedPay export default FailedPay;
components/booking/index.js
+29 -16
View File
@@ -1,19 +1,32 @@
import Information from "./information" import Information from "./information";
import Location from "./location" import Location from "./location";
function BookingPage({ doctor, step, setStep, children, isFirst, disableSide }) { function BookingPage({
return ( doctor,
<div step,
className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive setStep,
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)]"> children,
{isFirst ? ( isFirst,
<Location disableSide={disableSide} doctor={doctor} /> disableSide,
) : ( }) {
<Information disableSide={disableSide} doctor={doctor} step={step} setStep={setStep} /> return (
)} <div
{children} className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
</div> 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;
components/booking/information/Detail.js
+105 -86
View File
@@ -1,94 +1,113 @@
import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA" import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA";
import CalendarA from "@/components/icons/CalendarA" import CalendarA from "@/components/icons/CalendarA";
import ClockA from "@/components/icons/ClockA" import ClockA from "@/components/icons/ClockA";
import LocationA from "@/components/icons/LocationA" import LocationA from "@/components/icons/LocationA";
import TickCircleOrange from "@/components/icons/TickCircleOrange" import TickCircleOrange from "@/components/icons/TickCircleOrange";
import { Button } from "@mui/material" import { Button } from "@mui/material";
function Detail({ doctor, step, setStep }) { function Detail({ doctor, step, setStep }) {
return ( return (
<div className=""> <div className="">
<ul className="flex flex-col items-start justify-start gap-[24px]"> <ul className="flex flex-col items-start justify-start gap-[24px]">
<li className="flex items-center justify-start gap-[4px]"> <li className="flex items-center justify-start gap-[4px]">
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]"> <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
<LocationA /> <LocationA />
</div> </div>
<p className="text-[#616161] text-[14px] md:text-[16px] font-normal">آدرس: {doctor.location}</p> <p className="text-[#616161] text-[14px] md:text-[16px] font-normal">
</li> آدرس: {doctor.location}
<li className="flex items-center justify-between w-full"> </p>
<div className="flex items-center justify-start gap-[4px]"> </li>
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]"> <li className="flex items-center justify-between w-full">
<CalendarA /> <div className="flex items-center justify-start gap-[4px]">
</div> <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
<div className="flex items-center justify-start"> <CalendarA />
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تاریخ نوبت: </p> </div>
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">13 خرداد 1403</p> <div className="flex items-center justify-start">
</div> <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
</div> تاریخ نوبت:{" "}
{step < 5 && ( </p>
<Button <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
className="!p-1 !flex !items-center !justify-end !gap-[2px]" 13 خرداد 1403
onClick={() => setStep(0)} </p>
variant="text" </div>
> </div>
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p> {step < 5 && (
<div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]"> <Button
<ArrowLeftOrangeA /> className="!p-1 !flex !items-center !justify-end !gap-[2px]"
</div> onClick={() => setStep(0)}
</Button> variant="text"
)} >
</li> <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">
<li className="flex items-center justify-between w-full"> تغییر{" "}
<div className="flex items-center justify-start gap-[4px]"> </p>
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]"> <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
<ClockA /> <ArrowLeftOrangeA />
</div> </div>
<div className="flex items-center justify-start"> </Button>
<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> </li>
</div> <li className="flex items-center justify-between w-full">
</div> <div className="flex items-center justify-start gap-[4px]">
{step < 5 && ( <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
<Button <ClockA />
className="!p-1 !flex !items-center !justify-end !gap-[2px]" </div>
onClick={() => setStep(0)} <div className="flex items-center justify-start">
variant="text" <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
> زمان نوبت:{" "}
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p> </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]"> <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
<ArrowLeftOrangeA /> ساعت 17:20
</div> </p>
</Button> </div>
)} </div>
</li> {step < 5 && (
</ul> <Button
<span className="!p-1 !flex !items-center !justify-end !gap-[2px]"
className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px] 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] mb-[8px] sm:mb-[13px] md:mb-[19px] lg:mb-[24px]
w-full h-px bg-[#D7D7D7] block" w-full h-px bg-[#D7D7D7] block"
></span> ></span>
<ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]"> <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]"> <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
<div <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] 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]" w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
> >
<TickCircleOrange /> <TickCircleOrange />
</div> </div>
<p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p> <p className="text-[#616161] text-[16px] font-normal">
</li> فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]"> ممکن می باشد.
<div </p>
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] </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]" w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
> >
<TickCircleOrange /> <TickCircleOrange />
</div> </div>
<p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p> <p className="text-[#616161] text-[16px] font-normal">
</li> لطفا به موقع در مطب حضور داشته باشید.
</ul> </p>
</div> </li>
) </ul>
</div>
);
} }
export default Detail export default Detail;
components/booking/information/Head.js
+24 -18
View File
@@ -1,29 +1,35 @@
import Image from "next/image" import Image from "next/image";
function Head({ doctor }) { function Head({ doctor }) {
return ( return (
<div className=" <div
className="
flex items-center justify-start flex items-center justify-start
gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px] gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px]
mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px] mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px]
mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px] 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] w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px] h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
" "
alt="profile doctor" alt="profile doctor"
src={doctor.img} src={doctor.img}
height={95} height={95}
width={95} width={95}
/> />
<div className="flex flex-col items-start justify-center gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px]"> <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-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p> {doctor.name}
</div> </p>
</div> <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
) تخصص: {doctor.expertise}
</p>
</div>
</div>
);
} }
export default Head export default Head;
components/booking/information/index.js
+23 -15
View File
@@ -1,22 +1,30 @@
import Detail from "./Detail" import Detail from "./Detail";
import Head from "./Head" import Head from "./Head";
function Information({ doctor, step, setStep, typePay, isPay, disableSide }) { function Information({ doctor, step, setStep, typePay, isPay, disableSide }) {
return ( return (
<div className={`w-full lg:w-[41%] relative ${disableSide ? 'hidden lg:flex' : ''}`}> <div
<div className={`w-full lg:w-[41%] relative ${
className={`p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border disableSide ? "hidden lg:flex" : ""
}`}
>
<div
className={`p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border
border-solid border-[#EFEFEF] bg-[#FFF] 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)] 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> <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
<Head doctor={doctor} /> <Head doctor={doctor} />
<Detail doctor={doctor} step={step} setStep={setStep} /> <Detail doctor={doctor} step={step} setStep={setStep} />
</div> </div>
</div> </div>
) );
} }
export default Information export default Information;
components/booking/location/Address.js
+16 -18
View File
@@ -1,21 +1,19 @@
function Address({ doctor }) { function Address({ doctor }) {
return ( return (
<ul className='hidden mt-[4px] lg:flex flex-col'> <ul className="hidden mt-[4px] lg:flex flex-col">
{doctor.address.map((item, idx) => ( {doctor.address.map((item, idx) => (
<li <li key={idx}>
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>
<div className='flex py-[12px] text-[#616161] text-[14px] items-start justify-start'> <p className="font-normal">{item.location}</p>
<p className='font-bold min-w-[115px]'>{`${item.name}: `}</p> </div>
<p className='font-normal'>{item.location}</p> {doctor.address.length > idx + 1 && (
</div> <span className="bg-[#EFEFEF] block h-px w-full"></span>
{doctor.address.length > idx + 1 && ( )}
<span className='bg-[#EFEFEF] block h-px w-full'></span> </li>
)} ))}
</li> </ul>
))} );
</ul>
)
} }
export default Address export default Address;
components/booking/location/Head.js
+22 -18
View File
@@ -1,24 +1,28 @@
import Image from 'next/image' import Image from "next/image";
function Head({ doctor }) { function Head({ doctor }) {
return ( return (
<div className="flex items-center justify-start gap-[12px]"> <div className="flex items-center justify-start gap-[12px]">
<Image <Image
className=' className="
w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px] w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px] h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
' "
src={doctor.img} src={doctor.img}
alt="profile" alt="profile"
height={56} height={56}
width={56} width={56}
/> />
<div className="flex flex-col items-start justify-start gap-[8px]"> <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-[#3B3B3B] text-[12px] md:text-[14px] font-bold">
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {doctor.expertise}</p> {doctor.name}
</div> </p>
</div> <p className="text-[#525252] text-[12px] md:text-[14px] font-medium">
) تخصص: {doctor.expertise}
</p>
</div>
</div>
);
} }
export default Head export default Head;
components/booking/location/index.js
+12 -12
View File
@@ -2,18 +2,18 @@ import Address from "./Address";
import Head from "./Head"; import Head from "./Head";
function Location({ doctor }) { function Location({ doctor }) {
return ( return (
<div className="h-fit lg:h-screen w-full lg:w-[39%]"> <div className="h-fit lg:h-screen w-full lg:w-[39%]">
<div <div
className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 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)]" 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} /> <Head doctor={doctor} />
<span className="block bg-[#EFEFEF] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span> <span className="block bg-[#EFEFEF] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span>
<Address doctor={doctor} /> <Address doctor={doctor} />
</div> </div>
</div> </div>
) );
} }
export default Location export default Location;
components/booking/paying/ButtonFixed.js
+9 -9
View File
@@ -1,15 +1,15 @@
import React from 'react' import React from "react";
function ButtonFixed({ children }) { function ButtonFixed({ children }) {
return ( return (
<div <div
className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t
md:border-t-transparent border-[#D7D7D7] z-10 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" !w-full sm:!w-full !p-[16px] sm:!px-[52px] md:!ml-0 md:!p-0 md:!w-full"
> >
{children} {children}
</div> </div>
) );
} }
export default ButtonFixed export default ButtonFixed;
components/booking/paying/index.js
+40 -32
View File
@@ -1,38 +1,46 @@
import ArrowLeftB from '@/components/icons/ArrowLeftB'; import ArrowLeftB from "@/components/icons/ArrowLeftB";
import { Button } from '@mui/material'; import { Button } from "@mui/material";
import ButtonFixed from './ButtonFixed'; import ButtonFixed from "./ButtonFixed";
function Paying({ setTypePay, fadeElement, setStep }) { function Paying({ setTypePay, fadeElement, setStep }) {
return ( return (
<div className='w-full lg:w-[59%]'> <div className="w-full lg:w-[59%]">
<div <div
className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`} 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 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
اطلاعات پرداخت اطلاعات پرداخت
</p> </p>
<div className='flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]'> <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-[#616161] text-[14px] md:text-[16px] font-medium">
<p className='text-[#525252] text-[14px] md:text-[16px] font-bold'>20،000 تومان</p> مبلغ پیش پرداخت (بیعانه) :{" "}
</div> </p>
<span className='bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]'></span> <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
<ButtonFixed> 20،000 تومان
<div className='flex items-center justify-between gap-2'> </p>
<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> </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;
components/booking/successPay/index.js
+47 -37
View File
@@ -1,46 +1,56 @@
import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA" import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA";
import TickCircleGreenA from "@/components/icons/TickCircleGreenA" import TickCircleGreenA from "@/components/icons/TickCircleGreenA";
import { Button } from "@mui/material" import { Button } from "@mui/material";
import Link from "next/link" import Link from "next/link";
function SuccessPay({ setStep }) { function SuccessPay({ setStep }) {
return ( return (
<div className='w-full lg:w-[59%]'> <div className="w-full lg:w-[59%]">
<div <div
className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 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]`} 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="pt-[8px] pb-[4px] grid place-items-center">
<div className="flex flex-col justify-center items-center gap-[14px]"> <div className="flex flex-col justify-center items-center gap-[14px]">
<TickCircleGreenA /> <TickCircleGreenA />
<p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p> <p className="text-[#3B3B3B] text-[20px] font-bold">
</div> پرداخت شما با موفقیت انجام شد.
<p </p>
className="text-[#3B3B3B] text-[16px] font-normal </div>
<p
className="text-[#3B3B3B] text-[16px] font-normal
mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px] mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px]
mb-[24px] md:mb-[16px]" 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> </p>
<div className="flex items-center justify-between my-[20px] gap-[80px]"> <div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
<p className="text-[#616161] text-[14px] font-medium">مقدار پرداخت شده: </p> <span className="w-full block h-px bg-[#EFEFEF]"></span>
<p className="text-[#05BA58] text-[14px] font-bold">20،000 تومان</p> <div className="flex items-center justify-between my-[20px] gap-[80px]">
</div> <p className="text-[#616161] text-[14px] font-medium">
<span className="w-full block h-px bg-[#EFEFEF]"></span> مقدار پرداخت شده:{" "}
</div> </p>
<Link href='/dashboard'> <p className="text-[#05BA58] text-[14px] font-bold">
<Button 20،000 تومان
variant="text" </p>
className="!flex !items-center !justify-center !gap-[4px]"
>
<p className="text-[16px] font-medium text-[#5559CE]">برو به نوبت های من</p>
<ArrowLeftBlueA />
</Button>
</Link>
</div>
</div> </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>
</div>
);
} }
export default SuccessPay export default SuccessPay;
components/clinic/components/about/ContentDetail.js
+11 -13
View File
@@ -1,17 +1,15 @@
import TextLoading from '@/app/component/loading/Text' import TextLoading from "@/app/component/loading/Text";
import React from 'react' import React from "react";
function ContentDetail({ head, children, loading }) { function ContentDetail({ head, children, loading }) {
return ( return (
<div className='my-[24px]'> <div className="my-[24px]">
<TextLoading width={200} height={20} loading={loading}> <TextLoading width={200} height={20} loading={loading}>
<p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p> <p className="text-[#3B3B3B] text-[20px] font-bold">{head}</p>
</TextLoading> </TextLoading>
<div className='mt-[16px]'> <div className="mt-[16px]">{children}</div>
{children} </div>
</div> );
</div>
)
} }
export default ContentDetail export default ContentDetail;
components/clinic/components/about/ListBime.js
+20 -23
View File
@@ -1,27 +1,24 @@
import CustomLoading from '@/app/component/loading/Custom' import CustomLoading from "@/app/component/loading/Custom";
import Image from 'next/image' import Image from "next/image";
function ListBime({ data, loading }) { function ListBime({ data, loading }) {
return ( 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]'> <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) => ( {data.list_bime.map((item, idx) => (
<CustomLoading width={156} height={110} loading={loading}> <CustomLoading width={156} height={110} loading={loading}>
<li <li
key={idx} key={idx}
className='p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]' className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
> >
<Image <Image src={item.img} height={92} width={92} alt="bime" />
src={item.img} <p className="text-[#525252] text-[16px] font-medium">
height={92} {item.name}
width={92} </p>
alt='bime' </li>
/> </CustomLoading>
<p className='text-[#525252] text-[16px] font-medium'>{item.name}</p> ))}
</li> </ul>
</CustomLoading> );
))}
</ul>
)
} }
export default ListBime export default ListBime;
components/clinic/components/about/Services.js
+14 -13
View File
@@ -1,32 +1,33 @@
import TextLoading from '@/app/component/loading/Text'; import TextLoading from "@/app/component/loading/Text";
import TickCircleOrange from '@/components/icons/TickCircleOrange'; import TickCircleOrange from "@/components/icons/TickCircleOrange";
function Services({ data, loading }) { function Services({ data, loading }) {
return ( 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 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-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) => ( {data.specialties.map((item, idx) => (
<li <li key={idx} className="flex items-start justify-start gap-2">
key={idx} <div className="min-w-[24px] min-h-[24px]">
className='flex items-start justify-start gap-2'
>
<div className='min-w-[24px] min-h-[24px]'>
<TickCircleOrange /> <TickCircleOrange />
</div> </div>
<TextLoading width={80} height={18} loading={loading}> <TextLoading width={80} height={18} loading={loading}>
<p <p
className={` className={`
text-[16px] font-normal text-[16px] font-normal
${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'} ${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
`} `}
>{item}</p> >
{item}
</p>
</TextLoading> </TextLoading>
</li> </li>
))} ))}
</ul> </ul>
) );
} }
export default Services export default Services;
components/clinic/components/about/Specialties.js
+25 -24
View File
@@ -1,32 +1,33 @@
import TextLoading from '@/app/component/loading/Text'; import TextLoading from "@/app/component/loading/Text";
import TickCircleOrange from '@/components/icons/TickCircleOrange'; import TickCircleOrange from "@/components/icons/TickCircleOrange";
function Specialties({ data, loading }) { function Specialties({ data, loading }) {
return ( 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 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-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 {data.specialties.map((item, idx) => (
key={idx} <li key={idx} className="flex items-start justify-start gap-2">
className='flex items-start justify-start gap-2' <div className="min-w-[24px] min-h-[24px]">
> <TickCircleOrange />
<div className='min-w-[24px] min-h-[24px]'> </div>
<TickCircleOrange /> <TextLoading width={80} height={18} loading={loading}>
</div> <p
<TextLoading width={80} height={18} loading={loading}> className={`
<p
className={`
text-[16px] font-normal text-[16px] font-normal
${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'} ${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
`} `}
>{item}</p> >
</TextLoading> {item}
</li> </p>
))} </TextLoading>
</ul> </li>
) ))}
</ul>
);
} }
export default Specialties export default Specialties;
components/clinic/components/about/images/Images.js
+25 -24
View File
@@ -1,30 +1,31 @@
import List from './List'; import List from "./List";
import Slider from './Slider'; import Slider from "./Slider";
import Image from 'next/image'; import Image from "next/image";
import CustomLoading from '@/app/component/loading/Custom'; import CustomLoading from "@/app/component/loading/Custom";
function Images({ data, loading }) { function Images({ data, loading }) {
return ( return (
<div <div
className=' className="
flex flex-col md:flex-row items-center mb-[8px] justify-center w-full flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden
'> "
<div className='w-full'> >
<CustomLoading loading={loading} width={600} height={400}> <div className="w-full">
<Image <CustomLoading loading={loading} width={600} height={400}>
className="rounded-[8px] overflow-hidden" <Image
src={data.images_clinic[0]} className="rounded-[8px] overflow-hidden"
alt="img clinic" src={data.images_clinic[0]}
height={432} alt="img clinic"
width={600} height={432}
/> width={600}
</CustomLoading> />
</div> </CustomLoading>
<List data={data} loading={loading} /> </div>
<Slider data={data} loading={loading} /> <List data={data} loading={loading} />
</div> <Slider data={data} loading={loading} />
) </div>
);
} }
export default Images export default Images;
components/clinic/components/about/images/List.js
+51 -51
View File
@@ -1,55 +1,55 @@
import CustomLoading from '@/app/component/loading/Custom'; import CustomLoading from "@/app/component/loading/Custom";
import Image from 'next/image'; import Image from "next/image";
function List({ data, loading }) { function List({ data, loading }) {
return ( return (
<div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]"> <div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
<div className='w-full'> <div className="w-full">
<CustomLoading loading={loading} width='full' height={190}> <CustomLoading loading={loading} width="full" height={190}>
<Image <Image
className="rounded-[8px] overflow-hidden" className="rounded-[8px] overflow-hidden"
src={data.images_clinic[1]} src={data.images_clinic[1]}
alt="img clinic" alt="img clinic"
height={204} height={204}
width={288} width={288}
/> />
</CustomLoading> </CustomLoading>
</div> </div>
<div className='w-full'> <div className="w-full">
<CustomLoading loading={loading} width='full' height={190}> <CustomLoading loading={loading} width="full" height={190}>
<Image <Image
className="rounded-[8px] overflow-hidden" className="rounded-[8px] overflow-hidden"
src={data.images_clinic[2]} src={data.images_clinic[2]}
alt="img clinic" alt="img clinic"
height={204} height={204}
width={288} width={288}
/> />
</CustomLoading> </CustomLoading>
</div> </div>
<div className='w-full'> <div className="w-full">
<CustomLoading loading={loading} width='full' height={190}> <CustomLoading loading={loading} width="full" height={190}>
<Image <Image
className="rounded-[8px] overflow-hidden" className="rounded-[8px] overflow-hidden"
src={data.images_clinic[3]} src={data.images_clinic[3]}
alt="img clinic" alt="img clinic"
height={204} height={204}
width={288} width={288}
/> />
</CustomLoading> </CustomLoading>
</div> </div>
<div className='w-full'> <div className="w-full">
<CustomLoading loading={loading} width='full' height={190}> <CustomLoading loading={loading} width="full" height={190}>
<Image <Image
className="rounded-[8px] overflow-hidden" className="rounded-[8px] overflow-hidden"
src={data.images_clinic[4]} src={data.images_clinic[4]}
alt="img clinic" alt="img clinic"
height={204} height={204}
width={288} width={288}
/> />
</CustomLoading> </CustomLoading>
</div> </div>
</div> </div>
) );
} }
export default List export default List;
components/clinic/components/about/images/Slider.js
+21 -20
View File
@@ -1,24 +1,25 @@
import CustomLoading from "@/app/component/loading/Custom" import CustomLoading from "@/app/component/loading/Custom";
import Image from "next/image" import Image from "next/image";
function Slider({ data, loading }) { function Slider({ data, loading }) {
return ( return (
<ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll"> <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) => {[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
idx !== 0 ? ( idx !== 0 ? (
<CustomLoading width={90} height={90} loading={loading}> <CustomLoading width={90} height={90} loading={loading}>
<Image <Image
key={idx} key={idx}
src={item} src={item}
width={90} width={90}
height={90} height={90}
alt="image clinic" alt="image clinic"
className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden" className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
/> />
</CustomLoading> </CustomLoading>
) : undefined)} ) : undefined
</ul> )}
) </ul>
);
} }
export default Slider export default Slider;
components/clinic/components/about/index.js
+44 -37
View File
@@ -9,48 +9,55 @@ import ContentDetail from "./ContentDetail";
import MultilineLoading from "@/app/component/loading/Multiline"; import MultilineLoading from "@/app/component/loading/Multiline";
function About({ data, loading }) { function About({ data, loading }) {
const [isMore, setIsMore] = useState(false);
const [isMore, setIsMore] = useState(false); return (
<div className="opacity-page transition-all duration-500">
return ( <Images data={data} loading={loading} />
<div className="opacity-page transition-all duration-500"> <ContentDetail loading={loading} head="کلینیک تخصصی و فوق تخصصی نیکان">
<Images data={data} loading={loading} /> <div className="flex flex-col items-center justify-center">
<ContentDetail loading={loading} head='کلینیک تخصصی و فوق تخصصی نیکان'> <MultilineLoading
<div className="flex flex-col items-center justify-center"> line={10}
<MultilineLoading line={10} loading={loading} width='full' height={18}> loading={loading}
<p width="full"
className={` height={18}
>
<p
className={`
text-[#525252] text-[16px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[32px] overflow-hidden relative 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:absolute after:right-0 after:bottom-0 after:h-[80px]
after:shadow-xl after:w-full transition-all duration-500 after:shadow-xl after:w-full transition-all duration-500
${isMore ? ${
'after:bg-transparent max-h-screen' : isMore
'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]' ? "after:bg-transparent max-h-screen"
} : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
}
`} `}
dangerouslySetInnerHTML={{ __html: data.caption }} dangerouslySetInnerHTML={{ __html: data.caption }}
></p> ></p>
</MultilineLoading> </MultilineLoading>
<Button <Button
className={`${loading && '!hidden'} !text-[#F17732] !text-[14px] !font-light !p-2`} className={`${
onClick={() => setIsMore(!isMore)} loading && "!hidden"
variant="text" } !text-[#F17732] !text-[14px] !font-light !p-2`}
> onClick={() => setIsMore(!isMore)}
{isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'} variant="text"
</Button> >
</div> {isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
</ContentDetail> </Button>
<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> </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;

Some files were not shown because too many files have changed in this diff Show More