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 Layout from '@/components/layout';
import AboutUsPage from "@/components/aboutUs";
import Layout from "@/components/layout";
function AboutUs() {
return (
<Layout title='درباره ما' name='about-us'>
<AboutUsPage />
</Layout>
)
return (
<Layout title="درباره ما" name="about-us">
<AboutUsPage />
</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 Layout from '@/components/layout';
import articles from '@/data/articles.json';
import BlogPage from "@/components/blog";
import Layout from "@/components/layout";
import articles from "@/data/articles.json";
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'>
<BlogPage
article={article}
articles={articles}
/>
</Layout>
)
return (
<Layout title="وبلاگ" name="blog">
<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 Layout from '@/components/layout'
import BlogsPage from "@/components/blogs";
import Layout from "@/components/layout";
function Blogs() {
return (
<Layout title='وبلاگ ها' name='blogs'>
<BlogsPage />
</Layout>
)
return (
<Layout title="وبلاگ ها" name="blogs">
<BlogsPage />
</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 doctors from '@/data/doctors.json';
import Date from '@/components/booking/date';
import BookingPage from '@/components/booking';
import RegisterPage from '@/components/register';
import Paying from '@/components/booking/paying';
import Detail from '@/components/booking/detail';
import FailedPay from '@/components/booking/failedPay';
import LogInPage from '@/components/register/LogInPage';
import SuccessPay from '@/components/booking/successPay';
import SetCodePage from '@/components/register/SetCodePage';
import Layout from "@/components/layout";
import doctors from "@/data/doctors.json";
import Date from "@/components/booking/date";
import BookingPage from "@/components/booking";
import RegisterPage from "@/components/register";
import Paying from "@/components/booking/paying";
import Detail from "@/components/booking/detail";
import FailedPay from "@/components/booking/failedPay";
import LogInPage from "@/components/register/LogInPage";
import SuccessPay from "@/components/booking/successPay";
import SetCodePage from "@/components/register/SetCodePage";
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 [isForAnother, setIsForAnother] = useState(false);
const [data, setData] = useState({
phone: { value: "09121056987", isEdit: false },
codemeli: { value: "1741025645", isEdit: false },
name: { value: "ساغر صابری نژاد", isEdit: false },
});
const [data, setData] = useState({
phone: { value: '09121056987', isEdit: false },
codemeli: { value: '1741025645', isEdit: false },
name: { value: 'ساغر صابری نژاد', isEdit: false }
});
const elements = [
<Date doctor={doctor} setStep={setStep} />,
<LogInPage setIsSendMsg={false} setStep={setStep} />,
<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 = [
<Date doctor={doctor} setStep={setStep} />,
<LogInPage setIsSendMsg={false} setStep={setStep} />,
<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} />
]
return (
<>
{step === 1 || step === 2 ? (
<RegisterPage>
{elements[step]}
</RegisterPage>
) : (
<Layout
title='رزرو'
name='booking'
disableFooter={step > 2}
paddingBottom='pb-[80px]'
>
<BookingPage
disableSide={step === 5 || step === 6}
isFirst={step === 0}
setStep={setStep}
doctor={doctor}
step={step}
>
{elements[step]}
</BookingPage>
</Layout>
)}
</>
)
return (
<>
{step === 1 || step === 2 ? (
<RegisterPage>{elements[step]}</RegisterPage>
) : (
<Layout
title="رزرو"
name="booking"
disableFooter={step > 2}
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 Layout from '@/components/layout';
import clinics from '@/data/clinics.json';
import doctors from '@/data/doctors.json';
import ClinicPage from "@/components/clinic";
import Layout from "@/components/layout";
import clinics from "@/data/clinics.json";
import doctors from "@/data/doctors.json";
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'>
<ClinicPage
data={clinic}
doctors={doctors}
/>
</Layout>
)
return (
<Layout title="کلینیک" name="clinic">
<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 Layout from '@/components/layout';
import ClinicsPage from "@/components/clinics";
import Layout from "@/components/layout";
function Clinics() {
return (
<Layout title='کلینیک ها' name='clinics'>
<ClinicsPage />
</Layout>
)
return (
<Layout title="کلینیک ها" name="clinics">
<ClinicsPage />
</Layout>
);
}
export default Clinics
export default Clinics;
app/component/AnimationTextHead.js
+16 -13
View File
@@ -1,16 +1,19 @@
function AnimationTextHead({ name, text, children }) {
return (
<div className='flex justify-center items-start relative w-fit'>
<div className='overflow-hidden mb-[4px] md:mb-[5px] lg:mb-[6px]'>
<p
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>
</div>
<div className="absolute bottom-0 right-1/2 translate-x-1/2 w-full flex justify-center">
{children}
</div>
</div>
)
return (
<div className="flex justify-center items-start relative w-fit">
<div className="overflow-hidden mb-[4px] md:mb-[5px] lg:mb-[6px]">
<p
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>
</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 }) {
return (
<TableContainer
className='!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]'
sx={{
'&.MuiTableContainer-root': {
borderRadius: zeroRadius && '0 !important'
}
}}
>
<Table className='!rounded-0 !shadow-none !overflow-hidden'>
<TableHead>
<TableRow
className='!bg-[#EFEFEF]'
>
{tableHead.map((item, idx) => (
<TableCell
key={idx}
className={`
return (
<TableContainer
className="!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
sx={{
"&.MuiTableContainer-root": {
borderRadius: zeroRadius && "0 !important",
},
}}
>
<Table className="!rounded-0 !shadow-none !overflow-hidden">
<TableHead>
<TableRow className="!bg-[#EFEFEF]">
{tableHead.map((item, idx) => (
<TableCell
key={idx}
className={`
!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}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{children}
</TableBody>
</Table>
</TableContainer>
)
>
{item}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>{children}</TableBody>
</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 EditOrangeA from "@/components/icons/EditOrangeA"
import { Button, TextField } from "@mui/material"
import EditGrayA from "@/components/icons/EditGrayA";
import EditOrangeA from "@/components/icons/EditOrangeA";
import { Button, TextField } from "@mui/material";
function EditField({ changeData, multiline, icon, placeholder, data, name, iconGray, isTransparent }) {
return (
<div className="relative w-full">
<TextField
value={data?.value}
rows={multiline}
multiline={multiline}
disabled={!data?.isEdit}
placeholder={placeholder || ''}
type='text'
className={`!w-full res-field-account ${isTransparent ? '!bg-transparent lg:!bg-[#FFF]' : '!bg-[#FFF]'}`}
onChange={e => {
changeData(e.target.value, 'value', name)
}}
sx={{
'& .MuiFormLabel-root': {
top: '-4px !important'
},
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
'& .MuiInputBase-root': {
padding: '0 !important',
borderRadius: '8px !important'
},
'.Mui-focused': {
'& .MuiOutlinedInput-notchedOutline': {
border: '1px solid #5559CE !important',
transition: '0.5s all'
}
}
}}
/>
<Button
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>
)
function EditField({
changeData,
multiline,
icon,
placeholder,
data,
name,
iconGray,
isTransparent,
}) {
return (
<div className="relative w-full">
<TextField
value={data?.value}
rows={multiline}
multiline={multiline}
disabled={!data?.isEdit}
placeholder={placeholder || ""}
type="text"
className={`!w-full res-field-account ${
isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
}`}
onChange={(e) => {
changeData(e.target.value, "value", name);
}}
sx={{
"& .MuiFormLabel-root": {
top: "-4px !important",
},
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #D7D7D7 !important",
},
"& .MuiInputBase-root": {
padding: "0 !important",
borderRadius: "8px !important",
},
".Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #5559CE !important",
transition: "0.5s all",
},
},
}}
/>
<Button
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 }) {
return (
<TextField
placeholder={isPlaceHolder && title}
label={!isPlaceHolder ? title : ''}
type={type || 'text'}
multiline={!!multiline}
rows={!!multiline ? 4 : 1}
className="!w-full !mx-auto !bg-[#FFF]"
sx={{
'& .MuiFormLabel-root': {
top: '-4px !important'
},
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiInputBase-root': { borderRadius: '6px !important' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
".Mui-focused": {
'& .MuiOutlinedInput-notchedOutline': {
border: '1px solid #5559CE !important',
transition: '0.5s all'
}
}
}}
/>
)
return (
<TextField
placeholder={isPlaceHolder && title}
label={!isPlaceHolder ? title : ""}
type={type || "text"}
multiline={!!multiline}
rows={!!multiline ? 4 : 1}
className="!w-full !mx-auto !bg-[#FFF]"
sx={{
"& .MuiFormLabel-root": {
top: "-4px !important",
},
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiInputBase-root": { borderRadius: "6px !important" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #E9ECEF !important",
},
".Mui-focused": {
"& .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 EditOrangeA from "@/components/icons/EditOrangeA"
import { Button, TextField } from "@mui/material"
import EditGrayA from "@/components/icons/EditGrayA";
import EditOrangeA from "@/components/icons/EditOrangeA";
import { Button, TextField } from "@mui/material";
function FieldIcon({ changeData, icon, placeholder, name }) {
return (
<div className="relative w-full">
<TextField
placeholder={placeholder || ''}
type='text'
className='!w-full'
onChange={e => {
changeData(e.target.value, name)
}}
sx={{
'& .MuiFormLabel-root': {
top: '-4px !important'
},
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
'& .MuiInputBase-root': {
padding: '0 !important',
borderRadius: '8px !important'
},
'.Mui-focused': {
'& .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'
>
{icon}
</Button>
</div>
)
return (
<div className="relative w-full">
<TextField
placeholder={placeholder || ""}
type="text"
className="!w-full"
onChange={(e) => {
changeData(e.target.value, name);
}}
sx={{
"& .MuiFormLabel-root": {
top: "-4px !important",
},
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #D7D7D7 !important",
},
"& .MuiInputBase-root": {
padding: "0 !important",
borderRadius: "8px !important",
},
".Mui-focused": {
"& .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">
{icon}
</Button>
</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";
function ItemDoctor({ doctor, loading }) {
return (
<li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
{/* Detail Doctor */}
<div className="flex items-center justify-start gap-2.5">
<CircularLoading loading={loading} width={66} height={66}>
<Image
width={72}
height={72}
src={doctor.img}
alt="image-doctor"
className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
/>
</CircularLoading>
<div className="flex flex-col items-start justify-center gap-2">
<TextLoading width={90} height={15} loading={loading}>
<p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
</TextLoading>
<TextLoading width={120} height={15} loading={loading}>
<p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
</TextLoading>
<CustomLoading width={100} height={25} loading={loading}>
<div className="flex rounded items-center justify-start gap-2">
<div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
<LikeD />
<p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
</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>
</CustomLoading>
</div>
return (
<li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
{/* Detail Doctor */}
<div className="flex items-center justify-start gap-2.5">
<CircularLoading loading={loading} width={66} height={66}>
<Image
width={72}
height={72}
src={doctor.img}
alt="image-doctor"
className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
/>
</CircularLoading>
<div className="flex flex-col items-start justify-center gap-2">
<TextLoading width={90} height={15} loading={loading}>
<p className="text-[#3B3B3B] text-[14px] font-bold">
{doctor.name}
</p>
</TextLoading>
<TextLoading width={120} height={15} loading={loading}>
<p className="text-[#616161] text-[14px] font-normal">
تخصص: {doctor.expertise}
</p>
</TextLoading>
<CustomLoading width={100} height={25} loading={loading}>
<div className="flex rounded items-center justify-start gap-2">
<div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
<LikeD />
<p className="text-[#616161] text-[12px] font-normal">
{doctor.satisfaction}%
</p>
</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>
</CustomLoading>
</div>
</div>
{/* Hours of work */}
<div className="flex my-4 items-center justify-start gap-0.5">
<ClockD />
<TextLoading width={150} height={15} loading={loading}>
<p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {doctor.hours_of_work}</p>
</TextLoading>
</div>
<CustomLoading loading={loading} width={150} height={20}>
<p
className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
${doctor.free_turn ?
'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' :
'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]'
}`}
>{doctor.free_turn ?
`اولین نوبت آزاد: ${doctor.free_turn}` :
'نوبت ندارد'
}</p>
</CustomLoading>
{/* Arrow */}
<Link href={`/doctor/${doctor.id}`}>
<Button
variant="contained"
className={`!p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit
${!doctor.free_turn || loading &&
'!bg-[#D7D7D7]'}
{/* Hours of work */}
<div className="flex my-4 items-center justify-start gap-0.5">
<ClockD />
<TextLoading width={150} height={15} loading={loading}>
<p className="text-[#7E7E7E] text-[12px] font-normal">
ساعت کاری: {doctor.hours_of_work}
</p>
</TextLoading>
</div>
<CustomLoading loading={loading} width={150} height={20}>
<p
className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
${
doctor.free_turn
? "bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]"
: "bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]"
}`}
>
{doctor.free_turn
? `اولین نوبت آزاد: ${doctor.free_turn}`
: "نوبت ندارد"}
</p>
</CustomLoading>
{/* Arrow */}
<Link href={`/doctor/${doctor.id}`}>
<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}
>
<ArrowLeftD />
</Button>
</Link>
</li>
)
disabled={!doctor.free_turn || loading}
>
<ArrowLeftD />
</Button>
</Link>
</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 Link from 'next/link'
import React from 'react'
import Image from "next/image";
import Link from "next/link";
import React from "react";
function Logo({ isAbsolute }) {
return (
<Link href='/' className={isAbsolute ? 'absolute right-[32px] top-0' : ''}>
<div className="flex items-center justify-start gap-[5px]">
<Image
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'
width={30}
height={30}
alt="logo"
/>
<p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
</div>
</Link>
)
return (
<Link href="/" className={isAbsolute ? "absolute right-[32px] top-0" : ""}>
<div className="flex items-center justify-start gap-[5px]">
<Image
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"
width={30}
height={30}
alt="logo"
/>
<p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold font-kalame">
نوبت ۷۲۴
</p>
</div>
</Link>
);
}
export default Logo
export default Logo;
app/component/Pageguide.js
+25 -20
View File
@@ -1,26 +1,31 @@
function Pageguide({ list }) {
return (
<ul className='flex items-center justify-start gap-1'>
{list.map((item, idx) => (
<li
key={idx}
className="flex items-center justify-start gap-1"
>
<p
className={`text-[16px] font-normal
${list.length > idx + 1 ? 'text-[#9B9B9B]' : 'text-[#525252]'}
return (
<ul className="flex items-center justify-start gap-1">
{list.map((item, idx) => (
<li key={idx} className="flex items-center justify-start gap-1">
<p
className={`text-[16px] font-normal
${
list.length > idx + 1
? "text-[#9B9B9B]"
: "text-[#525252]"
}
`}
>{item}</p>
<span
className={`
>
{item}
</p>
<span
className={`
text-[#9B9B9B] text-[16px] font-normal
${list.length > idx + 1 ? 'flex' : 'hidden'}
${list.length > idx + 1 ? "flex" : "hidden"}
`}
>{'>'}</span>
</li>
))}
</ul>
)
>
{">"}
</span>
</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() {
return (
<PaginationMUI
// count={doctors.length / 12} org
count={20} // test
color='primary'
sx={{
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root': {
color: '#616161',
fontSize: '16px',
fontWeight: '500'
},
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': {
color: '#F8F8FF'
},
'& .MuiSvgIcon-root': {
rotate: '180deg !important'
}
}}
/>
)
return (
<PaginationMUI
// count={doctors.length / 12} org
count={20} // test
color="primary"
sx={{
"& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
color: "#616161",
fontSize: "16px",
fontWeight: "500",
},
"& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
{
color: "#F8F8FF",
},
"& .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 { LinearProgress } from "@mui/material"
import { numberToArStyle } from "@/helper";
import { LinearProgress } from "@mui/material";
function ProgressDetail({ data }) {
return (
<li className="flex items-center justify-start gap-2 w-full">
<p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
<LinearProgress
value={data.progress}
variant="determinate"
className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
sx={{
'& .MuiLinearProgress-bar': {
background: '#05BA58',
borderRadius: '10px'
}
}}
/>
<p className="text-[#525252] text-[20px] font-medium">{numberToArStyle(data.progress)}%</p>
</li>
)
return (
<li className="flex items-center justify-start gap-2 w-full">
<p className="text-[#525252] text-[14px] font-normal w-[118px]">
{data.label}
</p>
<LinearProgress
value={data.progress}
variant="determinate"
className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
sx={{
"& .MuiLinearProgress-bar": {
background: "#05BA58",
borderRadius: "10px",
},
}}
/>
<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 { useState } from "react"
import { Slider } from "@mui/material";
import { useState } from "react";
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">
<p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
<Slider
defaultValue={value}
className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
onChange={e => setValue(e.target.value)}
sx={{
'& .MuiSlider-rail': {
background: '#E8E8E8',
opacity: '100'
},
'& .MuiSlider-track': {
background: '#05BA58',
border: 'none'
},
'& .MuiSlider-thumb': {
marginRight: '-21px',
background: '#EBEBEB',
border: '1px solid #05BA58 !important'
},
'& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': {
boxShadow: 'none'
},
}}
/>
<p className="text-[#525252] text-[20px] font-medium w-[30px]">
{value}
</p>
</li>
)
return (
<li className="flex items-center justify-start gap-3 w-full">
<p className="text-[#525252] text-[14px] font-normal w-[118px]">
{data.label}
</p>
<Slider
defaultValue={value}
className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
onChange={(e) => setValue(e.target.value)}
sx={{
"& .MuiSlider-rail": {
background: "#E8E8E8",
opacity: "100",
},
"& .MuiSlider-track": {
background: "#05BA58",
border: "none",
},
"& .MuiSlider-thumb": {
marginRight: "-21px",
background: "#EBEBEB",
border: "1px solid #05BA58 !important",
},
"& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover": {
boxShadow: "none",
},
}}
/>
<p className="text-[#525252] text-[20px] font-medium w-[30px]">{value}</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) {
return {
id: `simple-tab-${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>
)
return {
id: `simple-tab-${index}`,
"aria-controls": `simple-tabpanel-${index}`,
};
}
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
'use client';
import createCache from '@emotion/cache';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';
import { useServerInsertedHTML } from 'next/navigation';
import { CacheProvider, ThemeProvider } from '@emotion/react';
import React from 'react';
import theme from '../theme/theme';
"use client";
import createCache from "@emotion/cache";
import { prefixer } from "stylis";
import rtlPlugin from "stylis-plugin-rtl";
import { useServerInsertedHTML } from "next/navigation";
import { CacheProvider, ThemeProvider } from "@emotion/react";
import React from "react";
import theme from "../theme/theme";
// This implementation is from emotion-js
// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
export default function ThemeRegistry({
children
}) {
const options = {
key: 'muirtl',
stylisPlugins: [prefixer, rtlPlugin],
export default function ThemeRegistry({ children }) {
const options = {
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 (
<CacheProvider value={cache}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</CacheProvider>
<style
key={cache.key}
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 { 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 }) {
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 (
<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
const disableMinHour =
timeStart || !value ? false : hourSelected + 1 > timeValue.$H;
return dataChange.is_morgen
? !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour)
: !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour);
}
}}
views={["hours", "minutes"]}
placeholder="انتخاب کنید..."
onChange={(e) => {
const hours = e.$H;
const minute = e.$m;
const handleTwoLength = (value) =>
String(value).length === 1 ? `0${value}` : value;
const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
minute
)}`;
const disableMinHour = timeStart || !value ? false :
(hourSelected + 1 > timeValue.$H)
return dataChange.is_morgen ?
!(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour) :
!(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour)
const newData = data;
const { idx, is_morgen } = dataChange;
newData[idx][is_morgen ? "morning_time" : "evening_time"][
timeStart ? 0 : 1
] = newValue;
}
}}
views={['hours', 'minutes']}
placeholder="انتخاب کنید..."
onChange={e => {
const hours = e.$H;
const minute = e.$m;
const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value
const newValue = `${handleTwoLength(hours)}:${handleTwoLength(minute)}`;
const newData = data;
const { idx, is_morgen } = dataChange;
newData[idx][is_morgen ? 'morning_time' : 'evening_time'][timeStart ? 0 : 1] = newValue;
setValue(newValue);
}}
sx={{
'& .MuiFormLabel-root': {
top: '-4px !important'
},
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
'& .MuiInputBase-root': {
borderRadius: '8px !important'
},
'.Mui-focused': {
'& .MuiOutlinedInput-notchedOutline': {
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]
setValue(newValue);
}}
sx={{
"& .MuiFormLabel-root": {
top: "-4px !important",
},
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #D7D7D7 !important",
},
"& .MuiInputBase-root": {
borderRadius: "8px !important",
},
".Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
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
${disable && '!text-[rgba(126,126,126,0.5)]'}`}>{value}</p>
</LocalizationProvider>
</div>
)
${disable && "!text-[rgba(126,126,126,0.5)]"}`}
>
{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 }) {
return (
<TextField
placeholder={isPlaceHolder && title}
label={!isPlaceHolder ? title : ''}
type={type || 'text'}
className="!w-full !mx-auto !bg-transparent"
sx={{
'& .MuiFormLabel-root': {
top: '-4px !important'
},
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiInputBase-root': { borderRadius: '6px !important' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #EFEFEF !important' },
".Mui-focused": {
'& .MuiOutlinedInput-notchedOutline': {
border: '1px solid #5559CE !important',
transition: '0.5s all'
}
}
}}
/>
)
return (
<TextField
placeholder={isPlaceHolder && title}
label={!isPlaceHolder ? title : ""}
type={type || "text"}
className="!w-full !mx-auto !bg-transparent"
sx={{
"& .MuiFormLabel-root": {
top: "-4px !important",
},
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiInputBase-root": { borderRadius: "6px !important" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #EFEFEF !important",
},
".Mui-focused": {
"& .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 LikeComment from "@/components/icons/LikeComment";
function ItemUser({ update, setUpdate, isReply, list, setList, data, loading }) {
const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
if (nameIsLike === 'is_like' && data.is_dislike) {
data.is_dislike = false;
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);
function ItemUser({
update,
setUpdate,
isReply,
list,
setList,
data,
loading,
}) {
const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
if (nameIsLike === "is_like" && data.is_dislike) {
data.is_dislike = false;
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 (
<li className="w-full">
<div className="flex items-center justify-start gap-2">
{loading ? (
<Skeleton variant="circular" className="!min-w-[40px] !min-h-[40px]" />
) : (
<Image
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}
height={40}
alt="profile"
/>
)}
<div className="flex flex-col items-start justify-center gap-[8px]">
{loading ? (
<Skeleton variant="text" className="!min-w-[70px]" />
) : (
<>
<p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">{data.name}</p>
<p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">3 روز پیش</p>
</>
)}
</div>
return (
<li className="w-full">
<div className="flex items-center justify-start gap-2">
{loading ? (
<Skeleton
variant="circular"
className="!min-w-[40px] !min-h-[40px]"
/>
) : (
<Image
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}
height={40}
alt="profile"
/>
)}
<div className="flex flex-col items-start justify-center gap-[8px]">
{loading ? (
<Skeleton variant="text" className="!min-w-[70px]" />
) : (
<>
<p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
{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 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>
{loading ? (
<Skeleton variant="text" className="!min-w-[8px]" />
) : (
<p className="text-[#6C757D] text-[12px] font-normal select-none">{data.like}</p>
)}
</div>
<div className="flex items-center justify-start gap-1">
<div
className="cursor-pointer"
onClick={() =>
handleLike(data.is_dislike ? data.dislike - 1 : data.dislike + 1, data, 'dislike', 'is_dislike')
}
>
{data.is_dislike ? (
<BoldDisLikeComment />
) : (
<DisLikeComment />
)}
</div>
{loading ? (
<Skeleton variant="text" className="!min-w-[8px]" />
) : (
<p className="text-[#6C757D] text-[12px] font-normal select-none">{data.dislike}</p>
)}
</div>
<Button
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]
{loading ? (
<Skeleton variant="text" className="!min-w-[8px]" />
) : (
<p className="text-[#6C757D] text-[12px] font-normal select-none">
{data.like}
</p>
)}
</div>
<div className="flex items-center justify-start gap-1">
<div
className="cursor-pointer"
onClick={() =>
handleLike(
data.is_dislike ? data.dislike - 1 : data.dislike + 1,
data,
"dislike",
"is_dislike"
)
}
>
{data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
</div>
{loading ? (
<Skeleton variant="text" className="!min-w-[8px]" />
) : (
<p className="text-[#6C757D] text-[12px] font-normal select-none">
{data.dislike}
</p>
)}
</div>
<Button
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)]"
>
ارسال پاسخ
</Button>
</div>
{!!data.replays.length && (
<div className="flex items-center justify-start gap-1 my-2">
<Button
className="!text-[#0FA1B3] !text-[12px] !font-medium"
onClick={() => {
data.is_open_reply = !data.is_open_reply;
setUpdate(!update);
}}
>
مشاهده پاسخ ها ({data.replays.length})
<div className={`!mr-1 ${data.is_open_reply ? '!rotate-0' : '!rotate-180'}`}>
<ArrowUpComment />
</div>
</Button>
</div>
)}
<ul
className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
${loading && 'w-full'}
${data.is_open_reply ? 'max-h-screen mt-12' : 'max-h-0'}`}
>
{data.replays.map((item, idx) => (
<ItemUser
key={idx}
data={item}
isReply={true}
update={update}
loading={loading}
setUpdate={setUpdate}
/>
))}
</ul>
</div>
</li>
)
>
ارسال پاسخ
</Button>
</div>
{!!data.replays.length && (
<div className="flex items-center justify-start gap-1 my-2">
<Button
className="!text-[#0FA1B3] !text-[12px] !font-medium"
onClick={() => {
data.is_open_reply = !data.is_open_reply;
setUpdate(!update);
}}
>
مشاهده پاسخ ها ({data.replays.length})
<div
className={`!mr-1 ${
data.is_open_reply ? "!rotate-0" : "!rotate-180"
}`}
>
<ArrowUpComment />
</div>
</Button>
</div>
)}
<ul
className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
${loading && "w-full"}
${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
>
{data.replays.map((item, idx) => (
<ItemUser
key={idx}
data={item}
isReply={true}
update={update}
loading={loading}
setUpdate={setUpdate}
/>
))}
</ul>
</div>
</li>
);
}
export default ItemUser
export default ItemUser;
app/component/comment/index.js
+27 -22
View File
@@ -1,27 +1,32 @@
'use client';
import { useState } from 'react';
import ItemUser from './ItemUser'
"use client";
import { useState } from "react";
import ItemUser from "./ItemUser";
function Comment({ data, loading }) {
const [list, setList] = useState(data.comments);
const [update, setUpdate] = useState(false);
const [list, setList] = useState(data.comments);
const [update, setUpdate] = useState(false);
return (
<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
key={idx}
list={list}
data={item}
update={update}
setList={setList}
loading={loading}
setUpdate={setUpdate}
/>
))}
</ul>
)
return (
<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
key={idx}
list={list}
data={item}
update={update}
setList={setList}
loading={loading}
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 React from 'react'
import { Button as ButtonMUI } from "@mui/material";
import React from "react";
function ButtonDate({ handleClick, id, text }) {
return (
<ButtonMUI
onClick={handleClick}
aria-describedby={id}
className="!border-[#E9ECEF] !text-[#6C757D]"
>
{text}
</ButtonMUI>
)
return (
<ButtonMUI
onClick={handleClick}
aria-describedby={id}
className="!border-[#E9ECEF] !text-[#6C757D]"
>
{text}
</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 }) {
return (
<div className="relative">
<TextField
label={title}
className="!w-full !mx-auto !bg-[#FFF]"
sx={{
borderRadius: '8px !important',
'& .MuiFormLabel-root': { transform: 'translate(16px, 50%) scale(1) !important' },
'& .MuiInputLabel-shrink': { transform: 'translate(14px, -9px) scale(0.75) !important' },
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiInputBase-root': { borderRadius: '8px !important' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
".Mui-focused": {
'& .MuiOutlinedInput-notchedOutline': {
border: '1px solid #0FA1B3 !important',
transition: '0.5s all'
}
}
}}
/>
<span
className="absolute cursor-pointer left-0 top-0 w-full h-full"
onClick={handleClick}
></span>
</div>
)
return (
<div className="relative">
<TextField
label={title}
className="!w-full !mx-auto !bg-[#FFF]"
sx={{
borderRadius: "8px !important",
"& .MuiFormLabel-root": {
transform: "translate(16px, 50%) scale(1) !important",
},
"& .MuiInputLabel-shrink": {
transform: "translate(14px, -9px) scale(0.75) !important",
},
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiInputBase-root": { borderRadius: "8px !important" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #E9ECEF !important",
},
".Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #0FA1B3 !important",
transition: "0.5s all",
},
},
}}
/>
<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 Image from 'next/image';
import { Button, Skeleton } from '@mui/material';
import Image from "next/image";
import { Button, Skeleton } from "@mui/material";
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 [endDate, setEndDate] = useState();
const [loading, setLoading] = useState(true);
const handleStartDateChange = (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
const handleStartDateChange = (date) => {
if (date) {
setStartDate(date);
setEndDate(null); // Clear end date if start date is selected
// updateDate(date); // Notify parent about the selected date
}
};
useEffect(() => {
if (nextIconDatePicker.current) {
nextIconDatePicker.current.click()
setLoading(false)
}
}, [nextIconDatePicker])
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
}
};
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)}
const handleDisableDate = (e) => {
const today = new Date();
return today >= e._d;
};
useEffect(() => {
if (nextIconDatePicker.current) {
nextIconDatePicker.current.click();
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 && (
<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}
/>
</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>
</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>
);
}
export default DatePicker;
app/component/date/dateTime/Hours.js
+24 -24
View File
@@ -1,32 +1,32 @@
import { Button } from "@mui/material";
function Hours({ doctor, hour, setHour, value, nameHours }) {
return (
<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]"
>
{doctor[nameHours[value]].map((item, idx) => (
<li
key={idx}
>
<Button
onClick={() => setHour(idx)}
disabled={!item.active}
className={`
return (
<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]">
{doctor[nameHours[value]].map((item, idx) => (
<li key={idx}>
<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]
${idx === hour ? '!bg-[#F79463] ' : ''}
${idx === hour ? "!bg-[#F79463] " : ""}
`}
>
<p className={`
>
<p
className={`
text-[16px] font-semibold text-[#525252]
${item.active ? 'text-[#525252]' : 'text-[#D7D7D7]'}
${idx === hour ? '!text-[#FAFAFA] ' : ''}
`}>{item.hour}</p>
</Button>
</li>
))}
</ul>
)
${item.active ? "text-[#525252]" : "text-[#D7D7D7]"}
${idx === hour ? "!text-[#FAFAFA] " : ""}
`}
>
{item.hour}
</p>
</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 Hours from "./Hours";
@@ -6,11 +6,10 @@ import Tabs from "../../Tabs";
import { Button } from "@mui/material";
import ArrowLeftB from "@/components/icons/ArrowLeftB";
const listTab = ['صبح', 'بعد از ظهر'];
const nameHours = ['hours_morning', 'hours_afternoon']
const listTab = ["صبح", "بعد از ظهر"];
const nameHours = ["hours_morning", "hours_afternoon"];
function DateTime({ doctor, setStep, setIsError, locateVisit }) {
const [value, setValue] = useState(0);
const [hour, setHour] = useState(0);
@@ -21,21 +20,21 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
<Tabs
isSm={true}
style={{
'.MuiTabs-indicator': {
height: '4px',
borderRadius: '8px',
background: '#F17732'
".MuiTabs-indicator": {
height: "4px",
borderRadius: "8px",
background: "#F17732",
},
'& .MuiTabs-flexContainer': {
borderBottom: '2px solid #EFEFEF',
marginBottom: '1px'
"& .MuiTabs-flexContainer": {
borderBottom: "2px solid #EFEFEF",
marginBottom: "1px",
},
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
color: '#F17732 !important'
"& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
color: "#F17732 !important",
},
"& .MuiButtonBase-root.Mui-selected": {
color: "#F17732 !important",
},
'& .MuiButtonBase-root.Mui-selected': {
color: '#F17732 !important'
}
}}
value={value}
listTab={listTab}
@@ -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]"
onClick={() => {
if (locateVisit) {
localStorage.setItem('doctor-id', doctor?.id);
setStep(prev => prev + 1);
localStorage.setItem("doctor-id", doctor?.id);
setStep((prev) => prev + 1);
} else {
setIsError(true);
}
@@ -66,7 +65,7 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
</Button>
</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";
function AutoCompleteSelect({ list, isError, updateData, name, label }) {
return (
<Autocomplete
disablePortal
options={list}
className="!w-full !rounded-lg"
onChange={(event) =>
updateData &&
updateData(event, name)
}
sx={{
...styleTextSelectRight,
// Hide Icon Number
'& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
display: 'none'
},
'& input[type=number]': {
MozAppearance: 'textfield'
},
'& .MuiInputBase-root': {
borderRadius: 2,
padding: '5px 16px !important'
},
'& .MuiOutlinedInput-notchedOutline': {
border: '1px solid #D7D7D7'
},
'& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline': {
borderColor: "#D7D7D7 !important"
},
'& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
border: '1px solid #5559CE !important'
},
'& .MuiOutlinedInput-notchedOutline': {
border: isError ? '1px solid red !important' : ''
}
}}
renderInput={params =>
<TextField
fullWidth
{...params}
InputProps={{
...params.InputProps,
endAdornment: (
<div
className="absolute left-4"
>
<BottomSelect />
</div>
)
}}
placeholder={label}
sx={{
borderRadius: '8px'
}}
/>
}
return (
<Autocomplete
disablePortal
options={list}
className="!w-full !rounded-lg"
onChange={(event) => updateData && updateData(event, name)}
sx={{
...styleTextSelectRight,
// Hide Icon Number
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
{
display: "none",
},
"& input[type=number]": {
MozAppearance: "textfield",
},
"& .MuiInputBase-root": {
borderRadius: 2,
padding: "5px 16px !important",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #D7D7D7",
},
"& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
{
borderColor: "#D7D7D7 !important",
},
"& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: "1px solid #5559CE !important",
},
"& .MuiOutlinedInput-notchedOutline": {
border: isError ? "1px solid red !important" : "",
},
}}
renderInput={(params) => (
<TextField
fullWidth
{...params}
InputProps={{
...params.InputProps,
endAdornment: (
<div className="absolute left-4">
<BottomSelect />
</div>
),
}}
placeholder={label}
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 { styleTextSelectRight } from "@/mui"
import { TextField } from "@mui/material";
import { styleTextSelectRight } from "@/mui";
function Field({ title, type, isPlaceHolder }) {
return (
<TextField
label={title}
dir="rtl"
type={type || 'text'}
className="!w-full !mx-auto !bg-[#FFF]"
sx={{
...styleTextSelectRight,
// Hide Icon Number
'& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
display: 'none'
},
'& input[type=number]': {
MozAppearance: 'textfield'
},
return (
<TextField
label={title}
dir="rtl"
type={type || "text"}
className="!w-full !mx-auto !bg-[#FFF]"
sx={{
...styleTextSelectRight,
// Hide Icon Number
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
{
display: "none",
},
"& input[type=number]": {
MozAppearance: "textfield",
},
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiInputBase-root': { borderRadius: '6px !important' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
".Mui-focused": {
'& .MuiOutlinedInput-notchedOutline': {
border: '1px solid #0FA1B3 !important',
transition: '0.5s all'
}
}
}}
/>
)
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiInputBase-root": { borderRadius: "6px !important" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #E9ECEF !important",
},
".Mui-focused": {
"& .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 }) {
return (
<div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
<div className="
return (
<div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
<div
className="
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)]
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>
{children}
</div>
</div>
)
"
>
<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>
{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 }) {
return loading ? (
<Skeleton
variant="circular"
height={height}
width={width}
/>
) : children
return loading ? (
<Skeleton variant="circular" height={height} 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 }) {
return loading ? (
<Skeleton
className={width === 'full' ? '!w-full' : ''}
height={height}
variant="rounded"
width={width}
/>
) : children
return loading ? (
<Skeleton
className={width === "full" ? "!w-full" : ""}
height={height}
variant="rounded"
width={width}
/>
) : (
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 }) {
return loading ? Array(line).fill({}).map(_ => (
<Skeleton
className={`${width === 'full' ? '!w-full' : ''} !my-2`}
return loading
? Array(line)
.fill({})
.map((_) => (
<Skeleton
className={`${width === "full" ? "!w-full" : ""} !my-2`}
variant="rounded"
height={height}
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 }) {
return loading ? (
<Skeleton
className={width === 'full' ? '!w-full' : ''}
variant="rounded"
height={height}
width={width}
/>
) : children
return loading ? (
<Skeleton
className={width === "full" ? "!w-full" : ""}
variant="rounded"
height={height}
width={width}
/>
) : (
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 Image from 'next/image'
import CloseModalD from "@/components/icons/CloseModalD";
import Image from "next/image";
const maps = [
{ src: '/assets/images/snapp.png', name: 'snapp' },
{ src: '/assets/images/tapsi.png', name: 'tapsi' },
{ src: '/assets/images/maps.png', name: 'maps' },
{ src: '/assets/images/balad.png', name: 'balad' },
{ src: '/assets/images/waze.png', name: 'waze' }
]
{ src: "/assets/images/snapp.png", name: "snapp" },
{ src: "/assets/images/tapsi.png", name: "tapsi" },
{ src: "/assets/images/maps.png", name: "maps" },
{ src: "/assets/images/balad.png", name: "balad" },
{ src: "/assets/images/waze.png", name: "waze" },
];
function Content({ handleClose }) {
return (
<>
<div className="flex items-center justify-between">
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">باز شدن با</p>
<div className="cursor-pointer" onClick={handleClose}>
<CloseModalD />
</div>
</div>
<span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
<ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
{maps.map((item, idx) => (
<li className="flex items-center flex-col justify-center gap-1">
<Image
className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]'
src={item.src}
alt="icon app"
height={40}
width={40}
/>
<p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
</li>
))}
</ul>
</>
)
return (
<>
<div className="flex items-center justify-between">
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
باز شدن با
</p>
<div className="cursor-pointer" onClick={handleClose}>
<CloseModalD />
</div>
</div>
<span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
<ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
{maps.map((item, idx) => (
<li className="flex items-center flex-col justify-center gap-1">
<Image
className="w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]"
src={item.src}
alt="icon app"
height={40}
width={40}
/>
<p className="text-[#3B3B3B] font-normal text-[14px]">
{item.name}
</p>
</li>
))}
</ul>
</>
);
}
export default Content
export default Content;
app/component/openLocation/index.js
+36 -43
View File
@@ -1,52 +1,45 @@
'use client';
"use client";
import { Drawer, Modal } from "@mui/material";
import { styleDefault } from "@/mui";
import Content from "./Content";
function ModalOpenLocation({ open, setOpen, handleClose, children }) {
const toggleDrawer = (newOpen) => () => {
setOpen(newOpen);
};
const toggleDrawer = (newOpen) => () => {
setOpen(newOpen);
};
return (
<>
{/* Button Modal */}
{children}
{/* Content Modal */}
<Modal
open={open}
onClose={handleClose}
className="!hidden md:!flex"
>
<div
style={styleDefault}
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
>
<Content onClose={handleClose} />
</div>
</Modal>
<Drawer
open={open}
anchor="bottom"
onClose={toggleDrawer(false)}
className="!flex md:!hidden"
sx={{
'& .MuiPaper-root': {
borderRadius: '25px 25px 0px 0px !important',
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>
</>
)
return (
<>
{/* Button Modal */}
{children}
{/* Content Modal */}
<Modal open={open} onClose={handleClose} className="!hidden md:!flex">
<div
style={styleDefault}
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
>
<Content onClose={handleClose} />
</div>
</Modal>
<Drawer
open={open}
anchor="bottom"
onClose={toggleDrawer(false)}
className="!flex md:!hidden"
sx={{
"& .MuiPaper-root": {
borderRadius: "25px 25px 0px 0px !important",
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 Layout from '@/components/layout';
import ContactUsPage from "@/components/contactUs";
import Layout from "@/components/layout";
function ContactUs() {
return (
<Layout title='تماس با ما' name='contact-us'>
<ContactUsPage />
</Layout>
)
return (
<Layout title="تماس با ما" name="contact-us">
<ContactUsPage />
</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 NotFoundPage from '@/components/notFound'
import Layout from "@/components/layout";
import NotFoundPage from "@/components/notFound";
function NotFound() {
return (
<Layout title='404' disableFooter={true}>
<Layout title="404" disableFooter={true}>
<NotFoundPage />
</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 UserAccountPage from "@/components/dashboard/userAccount/UserAccount";
function UserAccount() {
const [value, setValue] = useState(0);
const [isOpenSide, setIsOpenSide] = useState(false);
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
const [value, setValue] = useState(0);
const [isOpenSide, setIsOpenSide] = useState(false);
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
return (
<DashboardPage
value={value}
setValue={setValue}
user={userData.data}
isOpenSide={isOpenSide}
setIsOpenSide={setIsOpenSide}
isTurnsDetails={isTurnsDetails}
setIsTurnsDetails={setIsTurnsDetails}
>
<UserAccountPage
value={value}
setValue={setValue}
user={userData.data}
isOpenSide={isOpenSide}
setIsOpenSide={setIsOpenSide}
isTurnsDetails={isTurnsDetails}
setIsTurnsDetails={setIsTurnsDetails}
/>
</DashboardPage>
)
return (
<DashboardPage
value={value}
setValue={setValue}
user={userData.data}
isOpenSide={isOpenSide}
setIsOpenSide={setIsOpenSide}
isTurnsDetails={isTurnsDetails}
setIsTurnsDetails={setIsTurnsDetails}
>
<UserAccountPage
value={value}
setValue={setValue}
user={userData.data}
isOpenSide={isOpenSide}
setIsOpenSide={setIsOpenSide}
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 doctors from '@/data/doctors.json';
import doctors from "@/data/doctors.json";
import Layout from "@/components/layout";
function Doctor({ params: { slug } }) {
const doctor = doctors.find((item) => item.id === +slug);
const doctor = doctors.find(item => item.id === +slug);
return (
<Layout title='دکتر ها'>
<DoctorPage doctor={doctor} />
</Layout>
)
return (
<Layout title="دکتر ها">
<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 Layout from '@/components/layout';
import DoctorsPage from "@/components/doctors";
import Layout from "@/components/layout";
function Doctors() {
return (
<Layout title='دکتر ها'>
<Layout title="دکتر ها">
<DoctorsPage />
</Layout>
)
);
}
export default Doctors
export default Doctors;
app/globals.css
+201 -196
View File
@@ -5,146 +5,146 @@
/* Font Irans Sans X */
@font-face {
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Thin.ttf);
font-weight: 100;
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Thin.ttf);
font-weight: 100;
}
@font-face {
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBlack.ttf);
font-weight: 200;
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBlack.ttf);
font-weight: 200;
}
@font-face {
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Light.ttf);
font-weight: 300;
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Light.ttf);
font-weight: 300;
}
@font-face {
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Regular.ttf);
font-weight: 400;
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Regular.ttf);
font-weight: 400;
}
@font-face {
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Medium.ttf);
font-weight: 500;
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Medium.ttf);
font-weight: 500;
}
@font-face {
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-DemiBold.ttf);
font-weight: 600;
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-DemiBold.ttf);
font-weight: 600;
}
@font-face {
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Bold.ttf);
font-weight: 700;
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Bold.ttf);
font-weight: 700;
}
@font-face {
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBold.ttf);
font-weight: 800;
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBold.ttf);
font-weight: 800;
}
@font-face {
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Black.ttf);
font-weight: 900;
font-family: iran-sans;
src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Black.ttf);
font-weight: 900;
}
/* Font Kalame */
@font-face {
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Thin.ttf);
font-weight: 100;
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Thin.ttf);
font-weight: 100;
}
@font-face {
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraLight.ttf);
font-weight: 200;
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraLight.ttf);
font-weight: 200;
}
@font-face {
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Light.ttf);
font-weight: 300;
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Light.ttf);
font-weight: 300;
}
@font-face {
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Regular.ttf);
font-weight: 400;
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Regular.ttf);
font-weight: 400;
}
@font-face {
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Medium.ttf);
font-weight: 500;
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Medium.ttf);
font-weight: 500;
}
@font-face {
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-SemiBold.ttf);
font-weight: 600;
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-SemiBold.ttf);
font-weight: 600;
}
@font-face {
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Bold.ttf);
font-weight: 700;
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Bold.ttf);
font-weight: 700;
}
@font-face {
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraBold.ttf);
font-weight: 800;
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraBold.ttf);
font-weight: 800;
}
@font-face {
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Black.ttf);
font-weight: 900;
font-family: kalame;
src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Black.ttf);
font-weight: 900;
}
body {
font-family: iran-sans;
padding: 0;
margin: 0;
background: #FAFAFA;
font-family: iran-sans;
padding: 0;
margin: 0;
background: #fafafa;
}
/* Scroll */
html {
scroll-behavior: smooth;
scroll-behavior: smooth;
}
::-webkit-scrollbar {
width: 7px;
width: 7px;
}
::-webkit-scrollbar-track {
background: #F1F1F1;
height: 50px;
border-radius: 10px;
background: #f1f1f1;
height: 50px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #C1C1C1;
height: 50px;
border-radius: 20px;
background: #c1c1c1;
height: 50px;
border-radius: 20px;
}
.font-kalame {
font-family: kalame;
font-family: kalame;
}
/* .bg-banner-home,
@@ -155,317 +155,322 @@ html {
} */
.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 {
background: url(../public/assets/images/banner-home.png);
position: relative;
background: url(../public/assets/images/banner-home.png);
position: relative;
}
.bg-banner-footer {
background: url(../public/assets/images/banner-footer.png);
background: url(../public/assets/images/banner-footer.png);
}
.bg-banner-about {
background: url(../public/assets/images/banner-about.png);
background: url(../public/assets/images/banner-about.png);
}
.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-stroke::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 40%;
background: url(../public/assets/images/banner-register.png);
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
z-index: -10;
content: "";
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 40%;
background: url(../public/assets/images/banner-register.png);
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
z-index: -10;
}
.bg-banner-register {
background: url(../public/assets/images/banner-register.png);
background: url(../public/assets/images/banner-register.png);
}
.animate-open {
animation: openx;
animation-duration: 2s;
animation: openx;
animation-duration: 2s;
}
.hover-mode-item-speciality:hover p:first-child {
color: #FAFAFA;
color: #fafafa;
}
.hover-mode-item-speciality:hover p:last-child {
color: #EFEFEF;
color: #efefef;
}
.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%);
border-radius: 16px;
position: relative;
overflow: hidden;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
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 {
width: 100%;
width: 100%;
}
.cover-head-blogs p {
position: absolute;
bottom: 32px;
color: #FAFAFA;
font-weight: 700;
position: absolute;
bottom: 32px;
color: #fafafa;
font-weight: 700;
}
@keyframes openx {
0% {
width: 0;
}
0% {
width: 0;
}
100% {
width: 85%;
}
100% {
width: 85%;
}
}
.padding-responsive {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
.hover-rotate-icon:hover svg {
transform: rotateY(360deg);
transition: 0.5s all;
transform: rotateY(360deg);
transition: 0.5s all;
}
.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 {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
padding-top: 10px;
padding-bottom: 10px;
}
.res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
padding-top: 10px;
padding-bottom: 10px;
}
}
/* Hidden Scroll */
.MuiPaper-root,
.MuiTableContainer-root {
box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important;
border-radius: 4px !important;
border: 1px solid var(--colors-gray-50, #EFEFEF) !important;
background: var(--colors-white, #FFF) !important;
box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important;
border-radius: 4px !important;
border: 1px solid var(--colors-gray-50, #efefef) !important;
background: var(--colors-white, #fff) !important;
}
.hidden-scroll::-webkit-scrollbar-thumb,
.MuiTabs-scroller::-webkit-scrollbar-thumb,
.MuiTableContainer-root::-webkit-scrollbar-thumb {
background: transparent;
background: transparent;
}
.hidden-scroll::-webkit-scrollbar,
.MuiTabs-scroller::-webkit-scrollbar,
.MuiTableContainer-root::-webkit-scrollbar {
height: 0;
height: 0;
}
.comment-list::-webkit-scrollbar {
height: 10px;
height: 10px;
}
.opacity-page {
animation: loadPageOpacity;
animation-duration: 1s;
animation: loadPageOpacity;
animation-duration: 1s;
}
.retry-icon svg {
animation: rotate 1s;
animation: rotate 1s;
}
.table-shadow-none {
box-shadow: none !important;
border-radius: 12px !important;
box-shadow: none !important;
border-radius: 12px !important;
}
.table-rounded-8 .table-shadow-none {
border-radius: 8px !important;
border-radius: 8px !important;
}
.w-full-content .content-text-panel {
width: 100%;
width: 100%;
}
@keyframes rotate {
from {
rotate: 90;
}
from {
rotate: 90;
}
to {
rotate: -360deg;
}
to {
rotate: -360deg;
}
}
@keyframes loadPageOpacity {
0% {
opacity: 0;
}
0% {
opacity: 0;
}
100% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.padding-responsive {
padding-left: 16px;
padding-right: 16px;
padding-left: 16px;
padding-right: 16px;
}
@media (min-width: 640px) {
.padding-responsive {
padding-left: 52px;
padding-right: 52px;
}
.padding-responsive {
padding-left: 52px;
padding-right: 52px;
}
}
@media (min-width: 768px) {
.padding-responsive {
padding-left: 80px;
padding-right: 80px;
}
.padding-responsive {
padding-left: 80px;
padding-right: 80px;
}
}
@media (min-width: 1024px) {
.padding-responsive {
padding-left: 108px;
padding-right: 108px;
}
.padding-responsive {
padding-left: 108px;
padding-right: 108px;
}
}
/* Date Picker Style */
.panel-elevation {
box-shadow: none !important;
border: none;
outline: none;
box-shadow: none !important;
border: none;
outline: none;
}
.icon-keyboard_double_arrow_right,
.icon-keyboard_double_arrow_left {
display: none !important;
display: none !important;
}
.icon-chevron-right::before,
.icon-chevron-left::before {
content: "" !important;
background: url(../public/assets/icons/arrow-right.svg);
width: 24px;
height: 24px;
content: "" !important;
background: url(../public/assets/icons/arrow-right.svg);
width: 24px;
height: 24px;
}
.icon-chevron-left::before {
rotate: 180deg;
rotate: 180deg;
}
.icon-left-datepicker {
rotate: 180deg;
rotate: 180deg;
}
.panel-date-holder-item span {
/* font-family: Iran Sans !important; */
font-size: 18px !important;
font-weight: 500 !important;
/* font-family: Iran Sans !important; */
font-size: 18px !important;
font-weight: 500 !important;
}
.panel-date-holder-item span:hover {
color: #FF8848 !important;
color: #ff8848 !important;
}
.year-item-selected,
.month-item-selected {
background: #FF8848 !important;
border-radius: 3px !important;
background: #ff8848 !important;
border-radius: 3px !important;
}
.panel-header-rtl {
border-bottom: none !important;
border-bottom: none !important;
}
.day-label-bar-inner-rtl div {
color: #6C757D !important;
color: #6c757d !important;
}
.panel-jalaali .days-body .not-current {
display: none !important;
display: none !important;
}
.panel-jalaali .days-body .day.hovered span {
color: #343A40 !important;
color: #343a40 !important;
}
.panel-jalaali .days-body .day.weekend-day span {
color: #B71232 !important;
color: #b71232 !important;
}
.panel-jalaali .today,
.panel-jalaali .highlight {
border-radius: 50% !important;
border-radius: 50% !important;
}
.panel-jalaali .today {
border: 1px solid #FF8848 !important;
border: 1px solid #ff8848 !important;
}
.panel-jalaali .highlight {
background: #ff975d !important;
background: #ff975d !important;
}
.panel-jalaali .panel-footer-wrapper,
.panel-jalaali .panel-footer-rtl {
display: none !important;
display: none !important;
}
.day.hovered.today {
border: 1px solid #F79463;
border-radius: 50%;
border: 1px solid #f79463;
border-radius: 50%;
}
.day-label-bar-inner-rtl {
background: #FFF !important;
background: #fff !important;
}
.day-item-outer .day-item-chain .day {
border-radius: 50%;
border-radius: 50%;
}
.panel-jalaali .today {
border-color: transparent !important;
border-color: transparent !important;
}
@media (max-width: 1024px) {
.day-label-bar-inner-rtl,
.panel-jalaali,
.panel-header-rtl,
.days-body {
background: #FAFAFA !important;
}
.day-label-bar-inner-rtl,
.panel-jalaali,
.panel-header-rtl,
.days-body {
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 ThemeRegistry from './component/ThemeRegistry';
import ThemeRegistry from "./component/ThemeRegistry";
import "jalaali-react-date-picker/lib/styles/index.css";
export const metadata = {
title: "نوبت724",
description: "نوبت 724 - سیستم آنلاین نوبت‌دهی برای پزشکان و کلینیک‌ها. با استفاده از نوبت 724، به راحتی نوبت پزشکی خود را به صورت آنلاین رزرو کنید و از خدمات سریع و کارآمد ما بهره‌مند شوید",
keywords: "نوبت 724, نوبت دهی, رزرو نوبت, پزشک, پزشکی, کلینیک, بیمارستان, نوبت آنلاین, سیستم نوبت دهی, سیستم نوبت دهی آنلاین, سیستم نوبت دهی پزشکی, سیستم نوبت دهی کلینیک, سیستم نوبت دهی بیمارستان, سیستم نوبت دهی آنلاین پزشکی, سیستم نوبت دهی آنلاین کلینیک, سیستم نوبت دهی آنلاین بیمارستان",
description:
"نوبت 724 - سیستم آنلاین نوبت‌دهی برای پزشکان و کلینیک‌ها. با استفاده از نوبت 724، به راحتی نوبت پزشکی خود را به صورت آنلاین رزرو کنید و از خدمات سریع و کارآمد ما بهره‌مند شوید",
keywords:
"نوبت 724, نوبت دهی, رزرو نوبت, پزشک, پزشکی, کلینیک, بیمارستان, نوبت آنلاین, سیستم نوبت دهی, سیستم نوبت دهی آنلاین, سیستم نوبت دهی پزشکی, سیستم نوبت دهی کلینیک, سیستم نوبت دهی بیمارستان, سیستم نوبت دهی آنلاین پزشکی, سیستم نوبت دهی آنلاین کلینیک, سیستم نوبت دهی آنلاین بیمارستان",
image: "https://www.nobat724.com/assets/images/logo.png",
};
export default function RootLayout({ children }) {
return (
<html lang="fa" dir='rtl'>
<html lang="fa" dir="rtl">
<ThemeRegistry>
<body className='bg-[#FAFAFA]'>{children}</body>
<body className="bg-[#FAFAFA]">{children}</body>
</ThemeRegistry>
</html>
);
};
}
app/login-verify/page.js
+19 -18
View File
@@ -1,24 +1,25 @@
'use client';
"use client";
import RegisterPage from '@/components/register';
import SetCodePage from '@/components/register/SetCodePage';
import LogInPage from '@/components/register/LogInPage';
import { useState } from 'react';
import RegisterPage from "@/components/register";
import SetCodePage from "@/components/register/SetCodePage";
import LogInPage from "@/components/register/LogInPage";
import { useState } from "react";
function LoginVerify() {
const [isSendMsg, setIsSendMsg] = useState(false);
const [isSendMsg, setIsSendMsg] = useState(false);
return (
<RegisterPage>
{isSendMsg ?
<SetCodePage
setIsSendMsg={setIsSendMsg}
link={`/account/${localStorage.getItem('doctor-id')}`}
/> :
<LogInPage setIsSendMsg={setIsSendMsg} />}
</RegisterPage>
)
return (
<RegisterPage>
{isSendMsg ? (
<SetCodePage
setIsSendMsg={setIsSendMsg}
link={`/account/${localStorage.getItem("doctor-id")}`}
/>
) : (
<LogInPage setIsSendMsg={setIsSendMsg} />
)}
</RegisterPage>
);
}
export default LoginVerify
export default LoginVerify;
app/login/page.js
+18 -21
View File
@@ -1,26 +1,23 @@
'use client';
import RegisterPage from '@/components/register';
import SetCodePage from '@/components/register/SetCodePage';
import LogInPage from '@/components/register/LogInPage';
import { useState } from 'react';
"use client";
import RegisterPage from "@/components/register";
import SetCodePage from "@/components/register/SetCodePage";
import LogInPage from "@/components/register/LogInPage";
import { useState } from "react";
function LogIn() {
const [isSendMsg, setIsSendMsg] = useState(false);
const [isSendMsg, setIsSendMsg] = useState(false);
return (
<div>
<RegisterPage>
{isSendMsg ?
<SetCodePage
setIsSendMsg={setIsSendMsg}
setStep={false}
link='/'
/> :
<LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />}
</RegisterPage>
</div>
)
return (
<div>
<RegisterPage>
{isSendMsg ? (
<SetCodePage setIsSendMsg={setIsSendMsg} setStep={false} link="/" />
) : (
<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 NotFoundPage from '@/components/notFound'
import Layout from "@/components/layout";
import NotFoundPage from "@/components/notFound";
function NotFound() {
return (
<Layout title='404' disableFooter={true}>
<Layout title="404" disableFooter={true}>
<NotFoundPage />
</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() {
return (
<Layout title='خانه' name=''>
<Layout title="خانه" name="">
<HomePage />
</Layout>
);
app/panel/(layout)/add-doctor/page.js
+3 -5
View File
@@ -1,10 +1,8 @@
import AddDoctorPage from "@/components/panel/addDoctor";
import Information from '@/data/information.json';
import Information from "@/data/information.json";
function AddDoctor() {
return (
<AddDoctorPage data={Information} />
)
return <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 Information from '@/data/information.json';
import Information from "@/data/information.json";
function Dashboard() {
return (
<DashboardPage data={Information} />
)
return <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 Header from "@/components/layoutPanel/header";
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 { usePathname } from "next/navigation";
import BgGray from "@/components/layoutPanel/sidebar/BgGray";
function LayoutPanel({ children }) {
const pathname = usePathname();
const [active, setActive] = useState(false);
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(true);
const pathname = usePathname();
const [active, setActive] = useState(false);
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
return (
<div className="flex min-h-screen">
<Sidebar
open={open}
active={active}
setOpen={setOpen}
setActive={setActive}
/>
<BgGray isActive={active} setIsActive={setActive} />
<main className={`
return (
<div className="flex min-h-screen">
<Sidebar
open={open}
active={active}
setOpen={setOpen}
setActive={setActive}
/>
<BgGray isActive={active} setIsActive={setActive} />
<main
className={`
w-full transition-all duration-500
${pathname.includes('dashboard') ?
(open ?
'md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]' :
'md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]'
) : (open ?
'md:w-[calc(100%-243px)]' :
'md:w-[calc(100%-96px)]')}
`}>
<Header
data={Information}
setActive={setActive}
disableProfile={pathname.includes('dashboard')}
/>
<section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
{children}
</section>
</main>
{pathname.includes('dashboard') && (
<UserDetail data={Information} loading={loading} />
)}
</div>
)
${
pathname.includes("dashboard")
? open
? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
: "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
: open
? "md:w-[calc(100%-243px)]"
: "md:w-[calc(100%-96px)]"
}
`}
>
<Header
data={Information}
setActive={setActive}
disableProfile={pathname.includes("dashboard")}
/>
<section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
{children}
</section>
</main>
{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 Information from '@/data/information.json';
import TurnsPage from "@/components/panel/turns";
import Information from "@/data/information.json";
function page() {
return (
<TurnsPage data={Information} />
)
return <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 Information from '@/data/information.json';
import UserAccountPage from "@/components/panel/userAccount";
import Information from "@/data/information.json";
function UserAccount() {
return (
<UserAccountPage data={Information} />
)
return <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 SpecialtiesPage from '@/components/specialties';
import Layout from "@/components/layout";
import SpecialtiesPage from "@/components/specialties";
function Specialties() {
return (
<Layout title='تخصص ها' name='specialties'>
<SpecialtiesPage />
</Layout>
)
return (
<Layout title="تخصص ها" name="specialties">
<SpecialtiesPage />
</Layout>
);
}
export default Specialties
export default Specialties;
app/theme/theme.js
+32 -32
View File
@@ -1,39 +1,39 @@
'use client';
import { createTheme } from '@mui/material/styles';
"use client";
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
direction: 'rtl',
typography: {
fontFamily: 'iran-sans',
direction: "rtl",
typography: {
fontFamily: "iran-sans",
},
components: {
MuiButton: {
styleOverrides: {
root: {
whiteSpace: "nowrap",
minWidth: "0",
padding: "9px 18px",
fontSize: "16px",
fontStyle: "normal",
fontWeight: "500",
},
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
whiteSpace: 'nowrap',
minWidth: '0',
padding: '9px 18px',
fontSize: '16px',
fontStyle: 'normal',
fontWeight: '500',
},
},
},
},
palette: {
primary: {
main: "#5559CE",
contrastText: "#EFEFEF",
},
palette: {
primary: {
main: "#5559CE",
contrastText: "#EFEFEF",
},
secondary: {
main: "#FAFAFA",
contrastText: "#616161",
},
success: {
main: "#FFB800",
contrastText: "#FFF",
}
}
secondary: {
main: "#FAFAFA",
contrastText: "#616161",
},
success: {
main: "#FFB800",
contrastText: "#FFF",
},
},
});
export default theme;