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
+5 -5
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'>
<Layout title="درباره ما" name="about-us">
<AboutUsPage />
</Layout>
)
);
}
export default AboutUs
export default AboutUs;
app/blog/[slug]/page.js
+8 -12
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 title="وبلاگ" name="blog">
<BlogPage article={article} articles={articles} />
</Layout>
)
);
}
export default Blog
export default Blog;
app/blogs/page.js
+5 -5
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'>
<Layout title="وبلاگ ها" name="blogs">
<BlogsPage />
</Layout>
)
);
}
export default Blogs
export default Blogs;
app/booking/[slug]/page.js
+32 -29
View File
@@ -1,54 +1,57 @@
'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 [data, setData] = useState({
phone: { value: '09121056987', isEdit: false },
codemeli: { value: '1741025645', isEdit: false },
name: { value: 'ساغر صابری نژاد', isEdit: false }
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} />,
<Detail
isForAnother={isForAnother}
setIsForAnother={setIsForAnother}
setStep={setStep}
data={data}
setData={setData}
/>,
<Paying setStep={setStep} />,
<SuccessPay setStep={setStep} />,
<FailedPay setStep={setStep} />
]
<FailedPay setStep={setStep} />,
];
return (
<>
{step === 1 || step === 2 ? (
<RegisterPage>
{elements[step]}
</RegisterPage>
<RegisterPage>{elements[step]}</RegisterPage>
) : (
<Layout
title='رزرو'
name='booking'
title="رزرو"
name="booking"
disableFooter={step > 2}
paddingBottom='pb-[80px]'
paddingBottom="pb-[80px]"
>
<BookingPage
disableSide={step === 5 || step === 6}
@@ -62,7 +65,7 @@ function Booking({ params: { slug } }) {
</Layout>
)}
</>
)
);
}
export default Booking
export default Booking;
app/clinic/[slug]/page.js
+9 -13
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 title="کلینیک" name="clinic">
<ClinicPage data={clinic} doctors={doctors} />
</Layout>
)
);
}
export default Blog
export default Blog;
app/clinics/page.js
+5 -5
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'>
<Layout title="کلینیک ها" name="clinics">
<ClinicsPage />
</Layout>
)
);
}
export default Clinics
export default Clinics;
app/component/AnimationTextHead.js
+8 -5
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]'>
<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>
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
+22 -15
View File
@@ -1,26 +1,35 @@
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]'
className="!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
sx={{
'&.MuiTableContainer-root': {
borderRadius: zeroRadius && '0 !important'
}
"&.MuiTableContainer-root": {
borderRadius: zeroRadius && "0 !important",
},
}}
>
<Table className='!rounded-0 !shadow-none !overflow-hidden'>
<Table className="!rounded-0 !shadow-none !overflow-hidden">
<TableHead>
<TableRow
className='!bg-[#EFEFEF]'
>
<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}
@@ -28,12 +37,10 @@ function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
))}
</TableRow>
</TableHead>
<TableBody>
{children}
</TableBody>
<TableBody>{children}</TableBody>
</Table>
</TableContainer>
)
);
}
export default CustomTable
export default CustomTable;
app/component/EditField.js
+40 -32
View File
@@ -1,8 +1,17 @@
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 }) {
function EditField({
changeData,
multiline,
icon,
placeholder,
data,
name,
iconGray,
isTransparent,
}) {
return (
<div className="relative w-full">
<TextField
@@ -10,46 +19,45 @@ function EditField({ changeData, multiline, icon, placeholder, data, name, iconG
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)
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'
"& .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",
},
'& .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'}`}
${multiline ? "!top-[24px]" : "!top-1/2"}`}
onClick={() => {
changeData(!data.isEdit, 'isEdit', name)
changeData(!data.isEdit, "isEdit", name);
}}
>
{icon ? icon :
iconGray ? (
<EditGrayA />
) : (
<EditOrangeA />
)}
{icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
</Button>
</div>
)
);
}
export default EditField
export default EditField;
app/component/Field.js
+17 -15
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'}
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'
"& .MuiFormLabel-root": {
top: "-4px !important",
},
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiInputBase-root": { borderRadius: "6px !important" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #E9ECEF !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'
}
}
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #5559CE !important",
transition: "0.5s all",
},
},
}}
/>
)
);
}
export default Field
export default Field;
app/component/FieldIcon.js
+26 -26
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)
placeholder={placeholder || ""}
type="text"
className="!w-full"
onChange={(e) => {
changeData(e.target.value, name);
}}
sx={{
'& .MuiFormLabel-root': {
top: '-4px !important'
"& .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",
},
'& .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'
>
<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
+27 -16
View File
@@ -27,20 +27,28 @@ function ItemDoctor({ doctor, loading }) {
</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>
<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>
<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>
<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>
<p className="text-[#616161] text-[12px] font-normal">
{doctor.point}
</p>
</div>
</div>
</CustomLoading>
@@ -51,28 +59,31 @@ function ItemDoctor({ doctor, loading }) {
<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>
<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
? "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>
>
{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]'}
${!doctor.free_turn || (loading && "!bg-[#D7D7D7]")}
`}
disabled={!doctor.free_turn || loading}
>
@@ -80,7 +91,7 @@ function ItemDoctor({ doctor, loading }) {
</Button>
</Link>
</li>
)
);
}
export default ItemDoctor
export default ItemDoctor;
app/component/Logo.js
+11 -9
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' : ''}>
<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'
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>
<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
+16 -11
View File
@@ -1,26 +1,31 @@
function Pageguide({ list }) {
return (
<ul className='flex items-center justify-start gap-1'>
<ul className="flex items-center justify-start gap-1">
{list.map((item, idx) => (
<li
key={idx}
className="flex items-center justify-start gap-1"
>
<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]'}
${
list.length > idx + 1
? "text-[#9B9B9B]"
: "text-[#525252]"
}
`}
>{item}</p>
>
{item}
</p>
<span
className={`
text-[#9B9B9B] text-[16px] font-normal
${list.length > idx + 1 ? 'flex' : 'hidden'}
${list.length > idx + 1 ? "flex" : "hidden"}
`}
>{'>'}</span>
>
{">"}
</span>
</li>
))}
</ul>
)
);
}
export default Pageguide
export default Pageguide;
app/component/Pagination.js
+14 -13
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'
color="primary"
sx={{
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root': {
color: '#616161',
fontSize: '16px',
fontWeight: '500'
"& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
color: "#616161",
fontSize: "16px",
fontWeight: "500",
},
'& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': {
color: '#F8F8FF'
"& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
{
color: "#F8F8FF",
},
"& .MuiSvgIcon-root": {
rotate: "180deg !important",
},
'& .MuiSvgIcon-root': {
rotate: '180deg !important'
}
}}
/>
)
);
}
export default Pagination
export default Pagination;
app/component/ProfressDetail.js
+14 -10
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>
<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'
}
"& .MuiLinearProgress-bar": {
background: "#05BA58",
borderRadius: "10px",
},
}}
/>
<p className="text-[#525252] text-[20px] font-medium">{numberToArStyle(data.progress)}%</p>
<p className="text-[#525252] text-[20px] font-medium">
{numberToArStyle(data.progress)}%
</p>
</li>
)
);
}
export default ProgressDetail
export default ProgressDetail;
app/component/ProgressChange.js
+22 -23
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>
<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)}
onChange={(e) => setValue(e.target.value)}
sx={{
'& .MuiSlider-rail': {
background: '#E8E8E8',
opacity: '100'
"& .MuiSlider-rail": {
background: "#E8E8E8",
opacity: "100",
},
'& .MuiSlider-track': {
background: '#05BA58',
border: 'none'
"& .MuiSlider-track": {
background: "#05BA58",
border: "none",
},
'& .MuiSlider-thumb': {
marginRight: '-21px',
background: '#EBEBEB',
border: '1px solid #05BA58 !important'
"& .MuiSlider-thumb": {
marginRight: "-21px",
background: "#EBEBEB",
border: "1px solid #05BA58 !important",
},
'& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': {
boxShadow: 'none'
"& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover": {
boxShadow: "none",
},
}}
/>
<p className="text-[#525252] text-[20px] font-medium w-[30px]">
{value}
</p>
<p className="text-[#525252] text-[20px] font-medium w-[30px]">{value}</p>
</li>
)
);
}
export default ProgressChange
export default ProgressChange;
app/component/Tabs.js
+9 -11
View File
@@ -1,24 +1,22 @@
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}`,
"aria-controls": `simple-tabpanel-${index}`,
};
};
}
function Tabs({ value, handleChange, listTab, isSm, style }) {
return (
<Box
className="!border-none !w-full"
>
<Box className="!border-none !w-full">
<TabsMUI
value={value}
onChange={handleChange}
sx={{
...style,
'.MuiTabs-fixed': {
overflow: 'auto !important'
".MuiTabs-fixed": {
overflow: "auto !important",
},
}}
>
@@ -29,13 +27,13 @@ function Tabs({ value, handleChange, listTab, isSm, style }) {
{...a11yProps(idx)}
className={`
text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
${isSm ? '!w-1/2 !m-0' : '!mr-2'}
${isSm ? "!w-1/2 !m-0" : "!mr-2"}
`}
/>
))}
</TabsMUI>
</Box>
)
);
}
export default Tabs
export default Tabs;
app/component/ThemeRegistry.js
+13 -15
View File
@@ -1,22 +1,20 @@
// 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
}) {
export default function ThemeRegistry({ children }) {
const options = {
key: 'muirtl',
key: "muirtl",
stylisPlugins: [prefixer, rtlPlugin],
}
};
const [{ cache, flush }] = React.useState(() => {
const cache = createCache(options);
cache.compat = true;
@@ -42,14 +40,14 @@ export default function ThemeRegistry({
if (names.length === 0) {
return null;
}
let styles = '';
let styles = "";
for (const name of names) {
styles += cache.inserted[name];
}
return (
<style
key={cache.key}
data-emotion={`${cache.key} ${names.join(' ')}`}
data-emotion={`${cache.key} ${names.join(" ")}`}
dangerouslySetInnerHTML={{
__html: styles,
}}
app/component/TimePickerField.js
+46 -35
View File
@@ -1,10 +1,9 @@
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">
@@ -15,59 +14,71 @@ function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
format="hh:mm"
className="!w-full"
shouldDisableTime={(timeValue, clockType) => {
if (clockType === 'hours') {
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)
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']}
views={["hours", "minutes"]}
placeholder="انتخاب کنید..."
onChange={e => {
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 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;
newData[idx][is_morgen ? "morning_time" : "evening_time"][
timeStart ? 0 : 1
] = newValue;
setValue(newValue);
}}
sx={{
'& .MuiFormLabel-root': {
top: '-4px !important'
"& .MuiFormLabel-root": {
top: "-4px !important",
},
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
'& .MuiInputBase-root': {
borderRadius: '8px !important'
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #D7D7D7 !important",
},
'.Mui-focused': {
'& .MuiOutlinedInput-notchedOutline': {
border: '1px solid #5559CE !important',
transition: '0.5s all'
}
"& .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",
},
'& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after': {
display: 'none !important'
}
}}
/>
<p className={`absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px]
<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>
${disable && "!text-[rgba(126,126,126,0.5)]"}`}
>
{value}
</p>
</LocalizationProvider>
</div>
)
);
}
export default TimePickerField
export default TimePickerField;
app/component/comment/Field.js
+16 -14
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'}
label={!isPlaceHolder ? title : ""}
type={type || "text"}
className="!w-full !mx-auto !bg-transparent"
sx={{
'& .MuiFormLabel-root': {
top: '-4px !important'
"& .MuiFormLabel-root": {
top: "-4px !important",
},
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiInputBase-root": { borderRadius: "6px !important" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #EFEFEF !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'
}
}
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #5559CE !important",
transition: "0.5s all",
},
},
}}
/>
)
);
}
export default Field;
app/component/comment/ItemUser.js
+59 -35
View File
@@ -9,26 +9,36 @@ 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 }) {
function ItemUser({
update,
setUpdate,
isReply,
list,
setList,
data,
loading,
}) {
const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
if (nameIsLike === 'is_like' && data.is_dislike) {
if (nameIsLike === "is_like" && data.is_dislike) {
data.is_dislike = false;
data.dislike--;
} else if (nameIsLike === 'is_dislike' && data.is_like) {
} 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]" />
<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]"
@@ -43,8 +53,12 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, 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>
<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>
@@ -56,45 +70,53 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
<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>
<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')
handleLike(
data.is_like ? data.like - 1 : data.like + 1,
data,
"like",
"is_like"
)
}
>
{data.is_like ? (
<BoldLikeComment />
) : (
<LikeComment />
)}
{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>
<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')
handleLike(
data.is_dislike ? data.dislike - 1 : data.dislike + 1,
data,
"dislike",
"is_dislike"
)
}
>
{data.is_dislike ? (
<BoldDisLikeComment />
) : (
<DisLikeComment />
)}
{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>
<p className="text-[#6C757D] text-[12px] font-normal select-none">
{data.dislike}
</p>
)}
</div>
<Button
@@ -104,17 +126,15 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
setUpdate(!update);
}}
variant="text"
>پاسخ</Button>
>
پاسخ
</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'}`}
${data.is_open_answer ? "max-h-fit" : "max-h-0"}`}
>
<Field
type='text'
title='پاسخ شما...'
isPlaceHolder={true}
/>
<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]
@@ -133,7 +153,11 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
}}
>
مشاهده پاسخ ها ({data.replays.length})
<div className={`!mr-1 ${data.is_open_reply ? '!rotate-0' : '!rotate-180'}`}>
<div
className={`!mr-1 ${
data.is_open_reply ? "!rotate-0" : "!rotate-180"
}`}
>
<ArrowUpComment />
</div>
</Button>
@@ -141,8 +165,8 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
)}
<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'}`}
${loading && "w-full"}
${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
>
{data.replays.map((item, idx) => (
<ItemUser
@@ -157,7 +181,7 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
</ul>
</div>
</li>
)
);
}
export default ItemUser
export default ItemUser;
app/component/comment/index.js
+12 -7
View File
@@ -1,15 +1,20 @@
'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);
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) => (
<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}
@@ -21,7 +26,7 @@ function Comment({ data, loading }) {
/>
))}
</ul>
)
);
}
export default Comment;
app/component/date/datePicker/ButtonDate.js
+4 -4
View File
@@ -1,5 +1,5 @@
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 (
@@ -10,7 +10,7 @@ function ButtonDate({ handleClick, id, text }) {
>
{text}
</ButtonMUI>
)
);
}
export default ButtonDate
export default ButtonDate;
app/component/date/datePicker/Field.js
+20 -14
View File
@@ -1,4 +1,4 @@
import { TextField } from "@mui/material"
import { TextField } from "@mui/material";
function Field({ title, handleClick }) {
return (
@@ -7,18 +7,24 @@ function Field({ title, handleClick }) {
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' },
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'
}
}
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #0FA1B3 !important",
transition: "0.5s all",
},
},
}}
/>
<span
@@ -26,7 +32,7 @@ function Field({ title, handleClick }) {
onClick={handleClick}
></span>
</div>
)
);
}
export default Field
export default Field;
app/component/date/datePicker/index.js
+24 -25
View File
@@ -1,12 +1,11 @@
'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 [startDate, setStartDate] = useState(null);
@@ -29,63 +28,63 @@ function DatePicker({ date, updateDate }) {
}
};
const handleDisableDate = e => {
const handleDisableDate = (e) => {
const today = new Date();
return today >= e._d
}
return today >= e._d;
};
useEffect(() => {
if (nextIconDatePicker.current) {
nextIconDatePicker.current.click()
setLoading(false)
nextIconDatePicker.current.click();
setLoading(false);
}
}, [nextIconDatePicker])
}, [nextIconDatePicker]);
return (
<div className='flex items-start justify-evenly w-full'>
<div className='w-1/2 relative flex justify-center'>
<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'}`}
className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
timePicker={false}
onChange={handleStartDateChange}
disabledDates={e => handleDisableDate(e)}
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'
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'>
<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'}`}
className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
nextIcon={
<Button
className='!min-w-0 !p-0 !rounded-full'
className="!min-w-0 !p-0 !rounded-full"
ref={nextIconDatePicker}
onClick={e => e.preventDefault()}
onClick={(e) => e.preventDefault()}
>
<Image
src='/assets/icons/arrow-right.svg'
className='icon-left-datepicker'
src="/assets/icons/arrow-right.svg"
className="icon-left-datepicker"
height={24}
width={24}
/>
</Button>
}
onChange={handleEndDateChange}
disabledDates={e => handleDisableDate(e)}
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'
className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
height={352}
/>
)}
app/component/date/dateTime/Hours.js
+12 -12
View File
@@ -2,31 +2,31 @@ 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]"
>
<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}
>
<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>
${item.active ? "text-[#525252]" : "text-[#D7D7D7]"}
${idx === hour ? "!text-[#FAFAFA] " : ""}
`}
>
{item.hour}
</p>
</Button>
</li>
))}
</ul>
)
);
}
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
+26 -28
View File
@@ -8,58 +8,56 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
disablePortal
options={list}
className="!w-full !rounded-lg"
onChange={(event) =>
updateData &&
updateData(event, name)
}
onChange={(event) => updateData && updateData(event, name)}
sx={{
...styleTextSelectRight,
// Hide Icon Number
'& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
display: 'none'
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
{
display: "none",
},
'& input[type=number]': {
MozAppearance: 'textfield'
"& input[type=number]": {
MozAppearance: "textfield",
},
'& .MuiInputBase-root': {
"& .MuiInputBase-root": {
borderRadius: 2,
padding: '5px 16px !important'
padding: "5px 16px !important",
},
'& .MuiOutlinedInput-notchedOutline': {
border: '1px solid #D7D7D7'
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #D7D7D7",
},
'& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline': {
borderColor: "#D7D7D7 !important"
"& .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'
"& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: "1px solid #5559CE !important",
},
"& .MuiOutlinedInput-notchedOutline": {
border: isError ? "1px solid red !important" : "",
},
'& .MuiOutlinedInput-notchedOutline': {
border: isError ? '1px solid red !important' : ''
}
}}
renderInput={params =>
renderInput={(params) => (
<TextField
fullWidth
{...params}
InputProps={{
...params.InputProps,
endAdornment: (
<div
className="absolute left-4"
>
<div className="absolute left-4">
<BottomSelect />
</div>
)
),
}}
placeholder={label}
sx={{
borderRadius: '8px'
borderRadius: "8px",
}}
/>
}
)}
/>
)
);
}
export default AutoCompleteSelect
export default AutoCompleteSelect;
app/component/element/Field.js
+20 -17
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'}
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::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
{
display: "none",
},
'& input[type=number]': {
MozAppearance: 'textfield'
"& input[type=number]": {
MozAppearance: "textfield",
},
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiInputBase-root': { borderRadius: '6px !important' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !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 #0FA1B3 !important',
transition: '0.5s all'
}
}
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #0FA1B3 !important",
transition: "0.5s all",
},
},
}}
/>
)
);
}
export default Field
export default Field;
app/component/head/index.js
+12 -6
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="
<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>
"
>
<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
+6 -8
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
<Skeleton variant="circular" height={height} width={width} />
) : (
children
);
}
export default CircularLoading
export default CircularLoading;
app/component/loading/Custom.js
+6 -4
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' : ''}
className={width === "full" ? "!w-full" : ""}
height={height}
variant="rounded"
width={width}
/>
) : children
) : (
children
);
}
export default CustomLoading
export default CustomLoading;
app/component/loading/Multiline.js
+9 -5
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(_ => (
return loading
? Array(line)
.fill({})
.map((_) => (
<Skeleton
className={`${width === 'full' ? '!w-full' : ''} !my-2`}
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
+6 -4
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' : ''}
className={width === "full" ? "!w-full" : ""}
variant="rounded"
height={height}
width={width}
/>
) : children
) : (
children
);
}
export default TextLoading
export default TextLoading;
app/component/openLocation/Content.js
+17 -13
View File
@@ -1,19 +1,21 @@
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>
<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>
@@ -23,18 +25,20 @@ function Content({ handleClose }) {
{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]'
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>
<p className="text-[#3B3B3B] font-normal text-[14px]">
{item.name}
</p>
</li>
))}
</ul>
</>
)
);
}
export default Content
export default Content;
app/component/openLocation/index.js
+9 -16
View File
@@ -1,11 +1,10 @@
'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);
};
@@ -15,11 +14,7 @@ function ModalOpenLocation({ open, setOpen, handleClose, children }) {
{/* Button Modal */}
{children}
{/* Content Modal */}
<Modal
open={open}
onClose={handleClose}
className="!hidden md:!flex"
>
<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"
@@ -33,20 +28,18 @@ function ModalOpenLocation({ open, setOpen, handleClose, children }) {
onClose={toggleDrawer(false)}
className="!flex md:!hidden"
sx={{
'& .MuiPaper-root': {
borderRadius: '25px 25px 0px 0px !important',
overflow: 'hidden'
}
"& .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)]"
>
<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
+5 -5
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'>
<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
+5 -6
View File
@@ -1,13 +1,12 @@
'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);
@@ -32,7 +31,7 @@ function UserAccount() {
setIsTurnsDetails={setIsTurnsDetails}
/>
</DashboardPage>
)
);
}
export default UserAccount
export default UserAccount;
app/doctor/[slug]/page.js
+5 -6
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='دکتر ها'>
<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
+25 -20
View File
@@ -118,7 +118,7 @@ body {
font-family: iran-sans;
padding: 0;
margin: 0;
background: #FAFAFA;
background: #fafafa;
}
/* Scroll */
@@ -132,13 +132,13 @@ html {
}
::-webkit-scrollbar-track {
background: #F1F1F1;
background: #f1f1f1;
height: 50px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #C1C1C1;
background: #c1c1c1;
height: 50px;
border-radius: 20px;
}
@@ -155,7 +155,7 @@ 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 {
@@ -200,15 +200,21 @@ html {
}
.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%);
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;
@@ -221,7 +227,7 @@ html {
.cover-head-blogs p {
position: absolute;
bottom: 32px;
color: #FAFAFA;
color: #fafafa;
font-weight: 700;
}
@@ -270,8 +276,8 @@ html {
.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;
border: 1px solid var(--colors-gray-50, #efefef) !important;
background: var(--colors-white, #fff) !important;
}
.hidden-scroll::-webkit-scrollbar-thumb,
@@ -394,12 +400,12 @@ html {
}
.panel-date-holder-item span:hover {
color: #FF8848 !important;
color: #ff8848 !important;
}
.year-item-selected,
.month-item-selected {
background: #FF8848 !important;
background: #ff8848 !important;
border-radius: 3px !important;
}
@@ -408,7 +414,7 @@ html {
}
.day-label-bar-inner-rtl div {
color: #6C757D !important;
color: #6c757d !important;
}
.panel-jalaali .days-body .not-current {
@@ -416,11 +422,11 @@ html {
}
.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,
@@ -429,7 +435,7 @@ html {
}
.panel-jalaali .today {
border: 1px solid #FF8848 !important;
border: 1px solid #ff8848 !important;
}
.panel-jalaali .highlight {
@@ -442,12 +448,12 @@ html {
}
.day.hovered.today {
border: 1px solid #F79463;
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 {
@@ -459,12 +465,11 @@ html {
}
@media (max-width: 1024px) {
.day-label-bar-inner-rtl,
.panel-jalaali,
.panel-header-rtl,
.days-body {
background: #FAFAFA !important;
background: #fafafa !important;
}
}
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
+13 -12
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);
return (
<RegisterPage>
{isSendMsg ?
{isSendMsg ? (
<SetCodePage
setIsSendMsg={setIsSendMsg}
link={`/account/${localStorage.getItem('doctor-id')}`}
/> :
<LogInPage setIsSendMsg={setIsSendMsg} />}
link={`/account/${localStorage.getItem("doctor-id")}`}
/>
) : (
<LogInPage setIsSendMsg={setIsSendMsg} />
)}
</RegisterPage>
)
);
}
export default LoginVerify
export default LoginVerify;
app/login/page.js
+12 -15
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);
return (
<div>
<RegisterPage>
{isSendMsg ?
<SetCodePage
setIsSendMsg={setIsSendMsg}
setStep={false}
link='/'
/> :
<LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />}
{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
+19 -17
View File
@@ -1,15 +1,14 @@
'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);
@@ -21,7 +20,6 @@ function LayoutPanel({ children }) {
}, 2000);
}, []);
return (
<div className="flex min-h-screen">
<Sidebar
@@ -31,30 +29,34 @@ function LayoutPanel({ children }) {
setActive={setActive}
/>
<BgGray isActive={active} setIsActive={setActive} />
<main className={`
<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)]')}
`}>
${
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')}
disableProfile={pathname.includes("dashboard")}
/>
<section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
{children}
</section>
</main>
{pathname.includes('dashboard') && (
{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
+5 -5
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'>
<Layout title="تخصص ها" name="specialties">
<SpecialtiesPage />
</Layout>
)
);
}
export default Specialties
export default Specialties;
app/theme/theme.js
+12 -12
View File
@@ -1,21 +1,21 @@
'use client';
import { createTheme } from '@mui/material/styles';
"use client";
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
direction: 'rtl',
direction: "rtl",
typography: {
fontFamily: 'iran-sans',
fontFamily: "iran-sans",
},
components: {
MuiButton: {
styleOverrides: {
root: {
whiteSpace: 'nowrap',
minWidth: '0',
padding: '9px 18px',
fontSize: '16px',
fontStyle: 'normal',
fontWeight: '500',
whiteSpace: "nowrap",
minWidth: "0",
padding: "9px 18px",
fontSize: "16px",
fontStyle: "normal",
fontWeight: "500",
},
},
},
@@ -32,8 +32,8 @@ const theme = createTheme({
success: {
main: "#FFB800",
contrastText: "#FFF",
}
}
},
},
});
export default theme;
components/aboutUs/Head.js
+10 -8
View File
@@ -1,18 +1,20 @@
import Image from 'next/image'
import React from 'react'
import Image from "next/image";
import React from "react";
function Head() {
return (
<div className='bg-[#5559C2] rounded-none md:rounded-lg w-full py-[24px] flex flex-col items-center justify-center gap-[13px] md:gap-[16px]'>
<div className="bg-[#5559C2] rounded-none md:rounded-lg w-full py-[24px] flex flex-col items-center justify-center gap-[13px] md:gap-[16px]">
<Image
src='/assets/images/logo-2.png'
src="/assets/images/logo-2.png"
height={46}
width={46}
alt='logo'
alt="logo"
/>
<p className="text-[#FAFAFA] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-bold">درباره نوبت ۷۲۴</p>
<p className="text-[#FAFAFA] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-bold">
درباره نوبت ۷۲۴
</p>
</div>
)
);
}
export default Head
export default Head;
components/aboutUs/Services.js
+19 -22
View File
@@ -1,40 +1,37 @@
import AnimationTextHead from '@/app/component/AnimationTextHead';
import UnderlineLG from '../icons/UnderlineLG';
import TickOrangeA from '../icons/TickOrangeA';
import AnimationTextHead from "@/app/component/AnimationTextHead";
import UnderlineLG from "../icons/UnderlineLG";
import TickOrangeA from "../icons/TickOrangeA";
const ourServices = [
'جستجوی سریع پزشک ',
'جستجوی کلینیک و مراکز درمانی',
'نوبت گیری راحت و آسان',
'دشبورد تخصصی بیمار',
'دشبورد تخصصی پزشک',
'نوبت گیری راحت و آسان'
]
"جستجوی سریع پزشک ",
"جستجوی کلینیک و مراکز درمانی",
"نوبت گیری راحت و آسان",
"دشبورد تخصصی بیمار",
"دشبورد تخصصی پزشک",
"نوبت گیری راحت و آسان",
];
function Services() {
return (
<div className='mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]'>
<div className='flex justify-center'>
<AnimationTextHead name='zoom-in-up' text='خدمات ما'>
<div className="mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]">
<div className="flex justify-center">
<AnimationTextHead name="zoom-in-up" text="خدمات ما">
<UnderlineLG />
</AnimationTextHead>
</div>
<ul
className='mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px]
gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3'
className="mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px]
gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3"
>
{ourServices.map((item, idx) => (
<li
key={idx}
className='flex items-start justify-start gap-[8px]'
>
<li key={idx} className="flex items-start justify-start gap-[8px]">
<TickOrangeA />
<p className='text-[#525252] text-[16px] font-medium'>{item}</p>
<p className="text-[#525252] text-[16px] font-medium">{item}</p>
</li>
))}
</ul>
</div>
)
);
}
export default Services
export default Services;
components/aboutUs/index.js
+13 -2
View File
@@ -15,10 +15,21 @@ function AboutUsPage() {
text-[#525252] text-[16px] font-normal mt-[32px] leading-[24px] md:leading-[32px] lg:leading-[40px]
px-[16px] sm:px-[52px] md:px-[15%] text-justify md:text-center
"
>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه
درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با
نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان
خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید
داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان
رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات
پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
<Services />
</div>
)
);
}
export default AboutUsPage;
components/blog/detail/Caption.js
+12 -12
View File
@@ -1,12 +1,12 @@
import CustomLoading from '@/app/component/loading/Custom'
import MultilineLoading from '@/app/component/loading/Multiline'
import Image from 'next/image'
import React from 'react'
import CustomLoading from "@/app/component/loading/Custom";
import MultilineLoading from "@/app/component/loading/Multiline";
import Image from "next/image";
import React from "react";
function Caption({ data, loading }) {
return (
<>
<CustomLoading loading={loading} width='full' height={500}>
<CustomLoading loading={loading} width="full" height={500}>
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data.cover_first}
@@ -15,15 +15,15 @@ function Caption({ data, loading }) {
width={808}
/>
</CustomLoading>
<div className={loading ? 'my-4' : ''}>
<MultilineLoading loading={loading} width='full' height={18} line={20}>
<div className={loading ? "my-4" : ""}>
<MultilineLoading loading={loading} width="full" height={18} line={20}>
<div
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
dangerouslySetInnerHTML={{ __html: data.caption }}
/>
</MultilineLoading>
</div>
<CustomLoading loading={loading} width='full' height={500}>
<CustomLoading loading={loading} width="full" height={500}>
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data.cover_second}
@@ -32,8 +32,8 @@ function Caption({ data, loading }) {
width={808}
/>
</CustomLoading>
<div className={loading ? 'my-4' : ''}>
<MultilineLoading loading={loading} width='full' height={18} line={20}>
<div className={loading ? "my-4" : ""}>
<MultilineLoading loading={loading} width="full" height={18} line={20}>
<div
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
dangerouslySetInnerHTML={{ __html: data.caption }}
@@ -41,7 +41,7 @@ function Caption({ data, loading }) {
</MultilineLoading>
</div>
</>
)
);
}
export default Caption
export default Caption;
components/blog/detail/SocialMedia.js
+7 -11
View File
@@ -1,13 +1,9 @@
import CircularLoading from "@/app/component/loading/Circular"
import LinkedinB from "@/components/icons/LinkedinB"
import TelegramB from "@/components/icons/TelegramB"
import WhatsappB from "@/components/icons/WhatsappB"
import CircularLoading from "@/app/component/loading/Circular";
import LinkedinB from "@/components/icons/LinkedinB";
import TelegramB from "@/components/icons/TelegramB";
import WhatsappB from "@/components/icons/WhatsappB";
const socials = [
<WhatsappB />,
<TelegramB />,
<LinkedinB />
]
const socials = [<WhatsappB />, <TelegramB />, <LinkedinB />];
function SocialMedia({ loading }) {
return (
@@ -24,7 +20,7 @@ function SocialMedia({ loading }) {
))}
<span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
</ul>
)
);
}
export default SocialMedia
export default SocialMedia;
components/blog/detail/commentUser/AddComment.js
+11 -9
View File
@@ -1,19 +1,21 @@
import { Button } from '@mui/material'
import React from 'react'
import { Button } from "@mui/material";
import React from "react";
function AddComment() {
return (
<div className='flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]'>
<p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را به اشتراک بگذارید:</p>
<div className="flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]">
<p className="text-[#616161] text-[16px] font-normal">
شما هم نظر خود را به اشتراک بگذارید:
</p>
<Button
variant='outlined'
className='!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px]
!px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]'
variant="outlined"
className="!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px]
!px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]"
>
ثبت نظر
</Button>
</div>
)
);
}
export default AddComment
export default AddComment;
components/blog/detail/commentUser/index.js
+9 -9
View File
@@ -1,19 +1,19 @@
import AnimationTextHead from '@/app/component/AnimationTextHead'
import Comment from '@/app/component/comment'
import Underline from '@/components/icons/Underline'
import React from 'react'
import AddComment from './AddComment'
import AnimationTextHead from "@/app/component/AnimationTextHead";
import Comment from "@/app/component/comment";
import Underline from "@/components/icons/Underline";
import React from "react";
import AddComment from "./AddComment";
function CommentUser({ data, loading }) {
return (
<div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
<AnimationTextHead name='zoom-in-up' text='نظرات'>
<div className="mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
<AnimationTextHead name="zoom-in-up" text="نظرات">
<Underline />
</AnimationTextHead>
<AddComment />
<Comment data={data} loading={loading} />
</div>
)
);
}
export default CommentUser
export default CommentUser;
components/blog/detail/index.js
+2 -2
View File
@@ -9,7 +9,7 @@ function Detail({ data, loading }) {
<SocialMedia loading={loading} />
<CommentUser data={data} loading={loading} />
</div>
)
);
}
export default Detail
export default Detail;
components/blog/head/index.js
+32 -12
View File
@@ -1,36 +1,56 @@
import TextLoading from "@/app/component/loading/Text"
import TextLoading from "@/app/component/loading/Text";
function Head({ data, loading }) {
return (
<div>
<TextLoading width={200} height={18} loading={loading}>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">پوست و مو {'>'}</p>
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
بلاگ {">"}
</p>
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
پوست و مو {">"}
</p>
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
روش های خانگی محافظت از پوست در تابستان
</p>
</div>
</TextLoading>
<div className={loading ? 'mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]' : ''}>
<div
className={
loading ? "mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" : ""
}
>
<TextLoading width={250} height={22} loading={loading}>
<p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
<p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
روش های خانگی محافظت از پوست در تابستان
</p>
</TextLoading>
</div>
<div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">تاریخ انتشار:</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
تاریخ انتشار:
</p>
<TextLoading width={55} height={22} loading={loading}>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data.date_of_release}
</p>
</TextLoading>
</div>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">زمان مطالعه:</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
زمان مطالعه:
</p>
<TextLoading width={55} height={22} loading={loading}>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data.time}
</p>
</TextLoading>
</div>
</div>
</div>
)
);
}
export default Head
export default Head;
components/blog/index.js
+3 -4
View File
@@ -1,4 +1,4 @@
'use client'
"use client";
import { useEffect, useState } from "react";
import Detail from "./detail";
@@ -6,7 +6,6 @@ import Head from "./head";
import RelatedContent from "./relatedContent";
function BlogPage({ article, articles }) {
const [loading, setLoading] = useState(true);
useEffect(() => {
@@ -23,7 +22,7 @@ function BlogPage({ article, articles }) {
<RelatedContent data={articles} loading={loading} />
</div>
</div>
)
);
}
export default BlogPage
export default BlogPage;
components/blog/relatedContent/Item.js
+8 -8
View File
@@ -25,22 +25,22 @@ function Item({ data, idx, loading }) {
<div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
<TextLoading width={150} height={18} loading={loading}>
<Link href={`/blog/${data.id}`}>
<p
className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
>{data.title}</p>
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
{data.title}
</p>
</Link>
</TextLoading>
<TextLoading width={110} height={18} loading={loading}>
<p
className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
>تاریخ انتشار: {data.date_of_release}</p>
<p className="text-[#9B9B9B] text-[12px] text-nowrap font-normal">
تاریخ انتشار: {data.date_of_release}
</p>
</TextLoading>
</div>
{data.id > idx + 1 && (
<span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
)}
</li>
)
);
}
export default Item
export default Item;
components/blog/relatedContent/index.js
+10 -15
View File
@@ -1,26 +1,21 @@
import AnimationTextHead from '@/app/component/AnimationTextHead'
import UnderlineLG from '@/components/icons/UnderlineLG'
import React from 'react'
import Item from './Item'
import AnimationTextHead from "@/app/component/AnimationTextHead";
import UnderlineLG from "@/components/icons/UnderlineLG";
import React from "react";
import Item from "./Item";
function RelatedContent({ data, loading }) {
return (
<div className='p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
<AnimationTextHead name='fade-up' text='مطالب مرتبط'>
<div className="p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
<AnimationTextHead name="fade-up" text="مطالب مرتبط">
<UnderlineLG />
</AnimationTextHead>
<ul className='flex w-full lg:w-fit flex-col justify-start items-start'>
<ul className="flex w-full lg:w-fit flex-col justify-start items-start">
{data.map((item, idx) => (
<Item
idx={idx}
data={item}
key={item.id}
loading={loading}
/>
<Item idx={idx} data={item} key={item.id} loading={loading} />
))}
</ul>
</div>
)
);
}
export default RelatedContent
export default RelatedContent;
components/blogs/Head.js
+65 -33
View File
@@ -1,77 +1,109 @@
import CustomLoading from '@/app/component/loading/Custom'
import TextLoading from '@/app/component/loading/Text'
import Image from 'next/image'
import Link from 'next/link'
import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text";
import Image from "next/image";
import Link from "next/link";
function Head({ loading }) {
return (
<div className='flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
<Link href='#' className='w-full lg:w-1/2 cover-head-blogs'>
<CustomLoading loading={loading} width='full' height={400}>
<div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
<Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
<CustomLoading loading={loading} width="full" height={400}>
<Image
src='/assets/images/head-blogs-1.png'
src="/assets/images/head-blogs-1.png"
width={600}
height={424}
alt='head blog'
alt="head blog"
/>
</CustomLoading>
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
<div
className={
loading
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
: ""
}
>
<TextLoading width={150} height={20} loading={loading}>
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
روش های خانگی محافظت از پوست در تابستان
</p>
</TextLoading>
</div>
</Link>
<div className='w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
<div className='w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
<Link href='#' className='w-full cover-head-blogs'>
<CustomLoading loading={loading} width='full' height={180}>
<div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
<div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
<Link href="#" className="w-full cover-head-blogs">
<CustomLoading loading={loading} width="full" height={180}>
<Image
src='/assets/images/head-blogs-2.png'
src="/assets/images/head-blogs-2.png"
width={600}
height={424}
alt='head blog'
alt="head blog"
/>
</CustomLoading>
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
<div
className={
loading
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
: ""
}
>
<TextLoading width={150} height={20} loading={loading}>
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
فواید نوشیدن آب برای سلامتی
</p>
</TextLoading>
</div>
</Link>
<Link href='#' className='w-full cover-head-blogs'>
<CustomLoading loading={loading} width='full' height={180}>
<Link href="#" className="w-full cover-head-blogs">
<CustomLoading loading={loading} width="full" height={180}>
<Image
src='/assets/images/head-blogs-3.png'
src="/assets/images/head-blogs-3.png"
width={600}
height={424}
alt='head blog'
alt="head blog"
/>
</CustomLoading>
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
<div
className={
loading
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
: ""
}
>
<TextLoading width={150} height={20} loading={loading}>
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
راهکارهای ساده برای درمان سر درد
</p>
</TextLoading>
</div>
</Link>
</div>
<Link href='#' className='w-full cover-head-blogs'>
<CustomLoading loading={loading} width='full' height={180}>
<Link href="#" className="w-full cover-head-blogs">
<CustomLoading loading={loading} width="full" height={180}>
<Image
src='/assets/images/head-blogs-4.png'
src="/assets/images/head-blogs-4.png"
width={600}
height={424}
alt='head blog'
alt="head blog"
/>
</CustomLoading>
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
<div
className={
loading
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
: ""
}
>
<TextLoading width={150} height={20} loading={loading}>
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
تغذیه مناسب برای کاهش فشار خون
</p>
</TextLoading>
</div>
</Link>
</div>
</div>
)
);
}
export default Head
export default Head;
components/blogs/index.js
+3 -4
View File
@@ -1,4 +1,4 @@
'use client';
"use client";
import { useEffect, useState } from "react";
@@ -7,7 +7,6 @@ import Title from "./title";
import LatestArticles from "./latestArticles";
function BlogsPage() {
const [loading, setLoading] = useState(true);
useEffect(() => {
@@ -22,7 +21,7 @@ function BlogsPage() {
<Head loading={loading} />
<LatestArticles loading={loading} />
</div>
)
);
}
export default BlogsPage
export default BlogsPage;
components/blogs/latestArticles/Article.js
+20 -14
View File
@@ -1,15 +1,15 @@
import CustomLoading from '@/app/component/loading/Custom';
import TextLoading from '@/app/component/loading/Text';
import Image from 'next/image'
import Link from 'next/link';
import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text";
import Image from "next/image";
import Link from "next/link";
function Article({ data, loading }) {
return (
<li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
<CustomLoading width='full' height={200} loading={loading}>
<li className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]">
<CustomLoading width="full" height={200} loading={loading}>
<Link href={`/blog/${data.id}`}>
<Image
className='w-full'
className="w-full"
alt="article-img"
src={data.src}
height={217}
@@ -17,25 +17,31 @@ function Article({ data, loading }) {
/>
</Link>
</CustomLoading>
<div className='p-[12px] md:p-[14px] lg:p-[16px]'>
<div className={loading ? 'mb-[12px] md:mb-[14px] lg:mb-[16px]' : ''}>
<div className="p-[12px] md:p-[14px] lg:p-[16px]">
<div className={loading ? "mb-[12px] md:mb-[14px] lg:mb-[16px]" : ""}>
<TextLoading width={150} height={18} loading={loading}>
<Link href={`/blog/${data.id}`}>
<p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
<p className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
{data.title}
</p>
</Link>
</TextLoading>
</div>
<div className='flex items-center justify-start gap-[35px]'>
<div className="flex items-center justify-start gap-[35px]">
<TextLoading width={100} height={18} loading={loading}>
<p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
<p className="text-[#9B9B9B] text-[14px] font-medium">
تاریخ انتشار: {data.date_of_release}
</p>
</TextLoading>
<TextLoading width={110} height={18} loading={loading}>
<p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
<p className="text-[#9B9B9B] text-[14px] font-medium">
زمان مطالعه: {data.time}
</p>
</TextLoading>
</div>
</div>
</li>
)
);
}
export default Article;
components/blogs/latestArticles/index.js
+10 -12
View File
@@ -1,25 +1,23 @@
import articles from '@/data/articles.json';
import articles from "@/data/articles.json";
import Article from "./Article";
import Pagination from '@/app/component/Pagination';
import Pagination from "@/app/component/Pagination";
function LatestArticles({ loading }) {
return (
<div>
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p>
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
جدیدترین مقاله ها
</p>
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
{articles.map(item => (
<Article
data={item}
key={item.id}
loading={loading}
/>
{articles.map((item) => (
<Article data={item} key={item.id} loading={loading} />
))}
</ul>
<div className='mt-[56px] flex justify-center'>
<div className="mt-[56px] flex justify-center">
<Pagination />
</div>
</div>
)
);
}
export default LatestArticles
export default LatestArticles;
components/blogs/title/ItemTitle.js
+8 -5
View File
@@ -1,13 +1,16 @@
import { Button } from "@mui/material"
import { Button } from "@mui/material";
function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
return (
<li>
<Button
className={`
!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px
${activeBtn === idx ? '!bg-[#F17732] !text-[#FAFAFA]' : '!bg-[#F5F5F5] !text-[#3B3B3B]'}
${
activeBtn === idx
? "!bg-[#F17732] !text-[#FAFAFA]"
: "!bg-[#F5F5F5] !text-[#3B3B3B]"
}
`}
onClick={() => setActiveBtn(idx)}
variant="contained"
@@ -16,7 +19,7 @@ function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
{name}
</Button>
</li>
)
);
}
export default ItemTitle
export default ItemTitle;
components/blogs/title/index.js
+4 -5
View File
@@ -1,11 +1,10 @@
'use client';
"use client";
import { useState } from "react";
import ItemTitle from "./ItemTitle";
const listTitle = ['سلامت روان', 'پوست و مو', 'کودک و نوجوان', 'دارو', 'تغذیه'];
const listTitle = ["سلامت روان", "پوست و مو", "کودک و نوجوان", "دارو", "تغذیه"];
function Title() {
const [activeBtn, setActiveBtn] = useState(0);
return (
@@ -20,7 +19,7 @@ function Title() {
/>
))}
</ul>
)
);
}
export default Title
export default Title;
components/booking/date/PlaceVisit.js
+12 -11
View File
@@ -1,28 +1,29 @@
'use client';
"use client";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
function PlaceVisit({ locateVisit, setLocateVisit, isError }) {
const clinics = [
{ label: 'درمانگاه رازی', id: 10 },
{ label: 'درمانگاه ابوعلی', id: 20 },
{ label: 'درمانگاه مرکزی', id: 30 }
{ label: "درمانگاه رازی", id: 10 },
{ label: "درمانگاه ابوعلی", id: 20 },
{ label: "درمانگاه مرکزی", id: 30 },
];
const updateData = event => setLocateVisit(event.target.innerText);
const updateData = (event) => setLocateVisit(event.target.innerText);
return (
<div className="flex flex-col items-start gap-[19px] justify-start">
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">1. انتخاب محل ویزیت</p>
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
1. انتخاب محل ویزیت
</p>
<AutoCompleteSelect
isError={isError && !locateVisit}
updateData={updateData}
label='درمانگاه'
label="درمانگاه"
list={clinics}
/>
</div>
)
);
}
export default PlaceVisit
export default PlaceVisit;
components/booking/date/Time/SelectDatePicker.js
+3 -5
View File
@@ -1,9 +1,7 @@
import DatePicker from "@/app/component/date/datePicker"
import DatePicker from "@/app/component/date/datePicker";
function SelectDatePicker() {
return (
<DatePicker />
)
return <DatePicker />;
}
export default SelectDatePicker
export default SelectDatePicker;
components/booking/date/Time/index.js
+6 -4
View File
@@ -1,15 +1,17 @@
import SelectDatePicker from "./SelectDatePicker"
import SelectDatePicker from "./SelectDatePicker";
function Time({ isStep }) {
return (
<div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">2. انتخاب روز</p>
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
2. انتخاب روز
</p>
<SelectDatePicker />
{!isStep && (
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
)}
</div>
)
);
}
export default Time
export default Time;
components/booking/date/hour/index.js
+6 -4
View File
@@ -1,9 +1,11 @@
import DateTime from "@/app/component/date/dateTime"
import DateTime from "@/app/component/date/dateTime";
function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
return (
<div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">3. انتخاب ساعت</p>
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
3. انتخاب ساعت
</p>
<DateTime
doctor={doctor}
setStep={setStep}
@@ -14,7 +16,7 @@ function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
)}
</div>
)
);
}
export default Hour
export default Hour;
components/booking/date/index.js
+6 -5
View File
@@ -4,14 +4,15 @@ import Time from "./Time";
import PlaceVisit from "./PlaceVisit";
function Date({ doctor, setStep }) {
const [locateVisit, setLocateVisit] = useState();
const [isError, setIsError] = useState(false);
return (
<div className="w-full lg:w-[61%]">
<div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF]
bg-transparent lg:bg-[#FFF]">
<div
className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF]
bg-transparent lg:bg-[#FFF]"
>
<PlaceVisit
setLocateVisit={setLocateVisit}
locateVisit={locateVisit}
@@ -31,7 +32,7 @@ function Date({ doctor, setStep }) {
/>
</div>
</div>
)
);
}
export default Date
export default Date;
components/booking/detail/Content.js
+7 -7
View File
@@ -1,17 +1,17 @@
function Content({ isConfirmed, children, title }) {
return (
<div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
<div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
<div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
<div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
{isConfirmed && (
<p
className='py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal'
>تایید شده</p>
<p className="py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal">
تایید شده
</p>
)}
</div>
{children}
</div>
)
);
}
export default Content
export default Content;
components/booking/detail/Form.js
+22 -16
View File
@@ -3,34 +3,40 @@ import EditField from "../../../app/component/EditField";
import Content from "./Content";
const bime = [
{ label: 'بیمه 1', id: 10 },
{ label: 'بیمه 2', id: 20 },
{ label: 'بیمه 3', id: 30 }
{ label: "بیمه 1", id: 10 },
{ label: "بیمه 2", id: 20 },
{ label: "بیمه 3", id: 30 },
];
function Form({ changeData, data, updateSelect, isForAnother }) {
return (
<div className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start
justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2">
<Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}>
<EditField changeData={changeData} data={data?.phone} name='phone' />
<div
className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start
justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
>
<Content title="شماره موبایل" isConfirmed={isForAnother ? false : true}>
<EditField changeData={changeData} data={data?.phone} name="phone" />
</Content>
<Content title='کد ملی'>
<EditField changeData={changeData} data={data?.codemeli} name='codemeli' />
<Content title="کد ملی">
<EditField
changeData={changeData}
data={data?.codemeli}
name="codemeli"
/>
</Content>
<Content title='نام و نام خانوادگی'>
<EditField changeData={changeData} data={data?.name} name='name' />
<Content title="نام و نام خانوادگی">
<EditField changeData={changeData} data={data?.name} name="name" />
</Content>
<Content title='نوع بیمه'>
<Content title="نوع بیمه">
<AutoCompleteSelect
updateData={updateSelect}
label='نوع بیمه'
name='first'
label="نوع بیمه"
name="first"
list={bime}
/>
</Content>
</div>
)
);
}
export default Form
export default Form;
components/booking/detail/index.js
+34 -18
View File
@@ -5,11 +5,18 @@ import ArrowLeftB from "@/components/icons/ArrowLeftB";
import ButtonFixed from "../paying/ButtonFixed";
import Form from "./Form";
function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeElement, setIsPay }) {
function Detail({
isForAnother,
setStep,
setIsForAnother,
data,
setData,
fadeElement,
setIsPay,
}) {
const [selected, setSelected] = useState({
first: '',
second: ''
first: "",
second: "",
});
const changeData = (value, type, name) =>
@@ -17,11 +24,12 @@ function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeEle
...data,
[name]: {
...data[name],
[type]: value
}
[type]: value,
},
});
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
const updateSelect = (event, name) =>
setSelected({ ...selected, [name]: event.target.innerText });
return (
// ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
@@ -32,7 +40,7 @@ function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeEle
`}
>
<p className="text-[#3B3B3B] text-[20px] font-bold">
{isForAnother ? 'اطلاعات کاربر جدید' : 'اطلاعات حساب کاربری'}
{isForAnother ? "اطلاعات کاربر جدید" : "اطلاعات حساب کاربری"}
</p>
<Form
isForAnother={isForAnother}
@@ -44,16 +52,18 @@ function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeEle
<Button
className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
onClick={() => {
setIsForAnother(true)
setIsForAnother(true);
setData({
phone: { value: '09121056987', isEdit: false },
codemeli: { value: '1741025645', isEdit: false },
name: { value: 'ساغر صابری نژاد', isEdit: false }
phone: { value: "09121056987", isEdit: false },
codemeli: { value: "1741025645", isEdit: false },
name: { value: "ساغر صابری نژاد", isEdit: false },
});
}}
>
<AddCircleBlueA />
<p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
<p className="text-[#5559CE] text-[16px] font-medium">
دریافت نوبت برای فرد دیگر{" "}
</p>
</Button>
)}
<ButtonFixed>
@@ -61,17 +71,23 @@ function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeEle
className={`
!flex !w-full md:!w-fit
!gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px]
${isForAnother ? '!mt-0 md:!mt-[40px]' : '!mt-0 md:!mt-[32px]'}`}
${
isForAnother
? "!mt-0 md:!mt-[40px]"
: "!mt-0 md:!mt-[32px]"
}`}
variant="contained"
onClick={() => setStep(prev => prev + 1)}
onClick={() => setStep((prev) => prev + 1)}
>
<p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
<p className="text-[#EFEFEF] text-[16px] font-medium">
ثبت اطلاعات
</p>
<ArrowLeftB />
</Button>
</ButtonFixed>
</div>
</div>
)
);
}
export default Detail
export default Detail;
components/booking/failedPay/index.js
+14 -8
View File
@@ -6,7 +6,7 @@ import InfoCircleRedA from "@/components/icons/InfoCircleRedA";
function FailedPay({ setStep, fadeElement }) {
return (
<div className='w-full lg:w-[59%]'>
<div className="w-full lg:w-[59%]">
<div
className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
@@ -14,31 +14,37 @@ function FailedPay({ setStep, fadeElement }) {
<div className="mt-[7px]">
<div className="flex flex-col justify-center items-center gap-[14px]">
<InfoCircleRedA />
<p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">پرداخت شما انجام نشد.</p>
<p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
پرداخت شما انجام نشد.
</p>
</div>
<div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
<Link href='/'>
<Link href="/">
<Button
variant="outlined"
className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
>
<RedoA />
<p className="text-[#5559CE] text-[16px] font-medium">صفحه اصلی</p>
<p className="text-[#5559CE] text-[16px] font-medium">
صفحه اصلی
</p>
</Button>
</Link>
<Button
variant="contained"
onClick={() => setStep(prev => prev - 2)}
onClick={() => setStep((prev) => prev - 2)}
className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
>
<RefreshA />
<p className="text-[#FAFAFA] text-[16px] font-medium">تلاش دوباره</p>
<p className="text-[#FAFAFA] text-[16px] font-medium">
تلاش دوباره
</p>
</Button>
</div>
</div>
</div>
</div>
)
);
}
export default FailedPay
export default FailedPay;
components/booking/index.js
+20 -7
View File
@@ -1,19 +1,32 @@
import Information from "./information"
import Location from "./location"
import Information from "./information";
import Location from "./location";
function BookingPage({ doctor, step, setStep, children, isFirst, disableSide }) {
function BookingPage({
doctor,
step,
setStep,
children,
isFirst,
disableSide,
}) {
return (
<div
className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]">
items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]"
>
{isFirst ? (
<Location disableSide={disableSide} doctor={doctor} />
) : (
<Information disableSide={disableSide} doctor={doctor} step={step} setStep={setStep} />
<Information
disableSide={disableSide}
doctor={doctor}
step={step}
setStep={setStep}
/>
)}
{children}
</div>
)
);
}
export default BookingPage
export default BookingPage;
components/booking/information/Detail.js
+36 -17
View File
@@ -1,9 +1,9 @@
import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA"
import CalendarA from "@/components/icons/CalendarA"
import ClockA from "@/components/icons/ClockA"
import LocationA from "@/components/icons/LocationA"
import TickCircleOrange from "@/components/icons/TickCircleOrange"
import { Button } from "@mui/material"
import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA";
import CalendarA from "@/components/icons/CalendarA";
import ClockA from "@/components/icons/ClockA";
import LocationA from "@/components/icons/LocationA";
import TickCircleOrange from "@/components/icons/TickCircleOrange";
import { Button } from "@mui/material";
function Detail({ doctor, step, setStep }) {
return (
@@ -13,7 +13,9 @@ function Detail({ doctor, step, setStep }) {
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
<LocationA />
</div>
<p className="text-[#616161] text-[14px] md:text-[16px] font-normal">آدرس: {doctor.location}</p>
<p className="text-[#616161] text-[14px] md:text-[16px] font-normal">
آدرس: {doctor.location}
</p>
</li>
<li className="flex items-center justify-between w-full">
<div className="flex items-center justify-start gap-[4px]">
@@ -21,8 +23,12 @@ function Detail({ doctor, step, setStep }) {
<CalendarA />
</div>
<div className="flex items-center justify-start">
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تاریخ نوبت: </p>
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">13 خرداد 1403</p>
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
تاریخ نوبت:{" "}
</p>
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
13 خرداد 1403
</p>
</div>
</div>
{step < 5 && (
@@ -31,7 +37,9 @@ function Detail({ doctor, step, setStep }) {
onClick={() => setStep(0)}
variant="text"
>
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">
تغییر{" "}
</p>
<div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
<ArrowLeftOrangeA />
</div>
@@ -44,8 +52,12 @@ function Detail({ doctor, step, setStep }) {
<ClockA />
</div>
<div className="flex items-center justify-start">
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">زمان نوبت: </p>
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">ساعت 17:20</p>
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
زمان نوبت:{" "}
</p>
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
ساعت 17:20
</p>
</div>
</div>
{step < 5 && (
@@ -54,7 +66,9 @@ function Detail({ doctor, step, setStep }) {
onClick={() => setStep(0)}
variant="text"
>
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">
تغییر{" "}
</p>
<div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
<ArrowLeftOrangeA />
</div>
@@ -75,7 +89,10 @@ function Detail({ doctor, step, setStep }) {
>
<TickCircleOrange />
</div>
<p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
<p className="text-[#616161] text-[16px] font-normal">
فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه
ممکن می باشد.
</p>
</li>
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
<div
@@ -84,11 +101,13 @@ function Detail({ doctor, step, setStep }) {
>
<TickCircleOrange />
</div>
<p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
<p className="text-[#616161] text-[16px] font-normal">
لطفا به موقع در مطب حضور داشته باشید.
</p>
</li>
</ul>
</div>
)
);
}
export default Detail
export default Detail;
components/booking/information/Head.js
+13 -7
View File
@@ -1,13 +1,15 @@
import Image from "next/image"
import Image from "next/image";
function Head({ doctor }) {
return (
<div className="
<div
className="
flex items-center justify-start
gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px]
mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px]
mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px]
">
"
>
<Image
className="
w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
@@ -19,11 +21,15 @@ function Head({ doctor }) {
width={95}
/>
<div className="flex flex-col items-start justify-center gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px]">
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">{doctor.name}</p>
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
{doctor.name}
</p>
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
تخصص: {doctor.expertise}
</p>
</div>
</div>
)
);
}
export default Head
export default Head;
components/booking/information/index.js
+14 -6
View File
@@ -1,14 +1,22 @@
import Detail from "./Detail"
import Head from "./Head"
import Detail from "./Detail";
import Head from "./Head";
function Information({ doctor, step, setStep, typePay, isPay, disableSide }) {
return (
<div className={`w-full lg:w-[41%] relative ${disableSide ? 'hidden lg:flex' : ''}`}>
<div
className={`w-full lg:w-[41%] relative ${
disableSide ? "hidden lg:flex" : ""
}`}
>
<div
className={`p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border
border-solid border-[#EFEFEF] bg-[#FFF]
top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]
${typePay === 'success' || typePay === 'failed' ? 'hidden md:block' : 'block'}
${
typePay === "success" || typePay === "failed"
? "hidden md:block"
: "block"
}
`}
>
<p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
@@ -16,7 +24,7 @@ function Information({ doctor, step, setStep, typePay, isPay, disableSide }) {
<Detail doctor={doctor} step={step} setStep={setStep} />
</div>
</div>
)
);
}
export default Information
export default Information;
components/booking/location/Address.js
+8 -10
View File
@@ -1,21 +1,19 @@
function Address({ doctor }) {
return (
<ul className='hidden mt-[4px] lg:flex flex-col'>
<ul className="hidden mt-[4px] lg:flex flex-col">
{doctor.address.map((item, idx) => (
<li
key={idx}
>
<div className='flex py-[12px] text-[#616161] text-[14px] items-start justify-start'>
<p className='font-bold min-w-[115px]'>{`${item.name}: `}</p>
<p className='font-normal'>{item.location}</p>
<li key={idx}>
<div className="flex py-[12px] text-[#616161] text-[14px] items-start justify-start">
<p className="font-bold min-w-[115px]">{`${item.name}: `}</p>
<p className="font-normal">{item.location}</p>
</div>
{doctor.address.length > idx + 1 && (
<span className='bg-[#EFEFEF] block h-px w-full'></span>
<span className="bg-[#EFEFEF] block h-px w-full"></span>
)}
</li>
))}
</ul>
)
);
}
export default Address
export default Address;
components/booking/location/Head.js
+11 -7
View File
@@ -1,24 +1,28 @@
import Image from 'next/image'
import Image from "next/image";
function Head({ doctor }) {
return (
<div className="flex items-center justify-start gap-[12px]">
<Image
className='
className="
w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
'
"
src={doctor.img}
alt="profile"
height={56}
width={56}
/>
<div className="flex flex-col items-start justify-start gap-[8px]">
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">{doctor.name}</p>
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {doctor.expertise}</p>
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">
{doctor.name}
</p>
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">
تخصص: {doctor.expertise}
</p>
</div>
</div>
)
);
}
export default Head
export default Head;
components/booking/location/index.js
+2 -2
View File
@@ -13,7 +13,7 @@ function Location({ doctor }) {
<Address doctor={doctor} />
</div>
</div>
)
);
}
export default Location
export default Location;
components/booking/paying/ButtonFixed.js
+3 -3
View File
@@ -1,4 +1,4 @@
import React from 'react'
import React from "react";
function ButtonFixed({ children }) {
return (
@@ -9,7 +9,7 @@ function ButtonFixed({ children }) {
>
{children}
</div>
)
);
}
export default ButtonFixed
export default ButtonFixed;
components/booking/paying/index.js
+23 -15
View File
@@ -1,10 +1,10 @@
import ArrowLeftB from '@/components/icons/ArrowLeftB';
import { Button } from '@mui/material';
import ButtonFixed from './ButtonFixed';
import ArrowLeftB from "@/components/icons/ArrowLeftB";
import { Button } from "@mui/material";
import ButtonFixed from "./ButtonFixed";
function Paying({ setTypePay, fadeElement, setStep }) {
return (
<div className='w-full lg:w-[59%]'>
<div className="w-full lg:w-[59%]">
<div
className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
@@ -12,27 +12,35 @@ function Paying({ setTypePay, fadeElement, setStep }) {
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
اطلاعات پرداخت
</p>
<div className='flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]'>
<p className='text-[#616161] text-[14px] md:text-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
<p className='text-[#525252] text-[14px] md:text-[16px] font-bold'>20،000 تومان</p>
<div className="flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]">
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
مبلغ پیش پرداخت (بیعانه) :{" "}
</p>
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
20،000 تومان
</p>
</div>
<span className='bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]'></span>
<span className="bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]"></span>
<ButtonFixed>
<div className='flex items-center justify-between gap-2'>
<p className='text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
<div className="flex items-center justify-between gap-2">
<p className="text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
مبلغ قابل پرداخت : 20،000 تومان
</p>
<Button
className='!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]'
onClick={() => setStep(prev => prev + 1)}
className="!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]"
onClick={() => setStep((prev) => prev + 1)}
variant="contained"
>
<p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
<p className="text-[#EFEFEF] text-[16px] font-medium">
پرداخت نهایی
</p>
<ArrowLeftB />
</Button>
</div>
</ButtonFixed>
</div>
</div>
)
);
}
export default Paying
export default Paying;
components/booking/successPay/index.js
+23 -13
View File
@@ -1,11 +1,11 @@
import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA"
import TickCircleGreenA from "@/components/icons/TickCircleGreenA"
import { Button } from "@mui/material"
import Link from "next/link"
import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA";
import TickCircleGreenA from "@/components/icons/TickCircleGreenA";
import { Button } from "@mui/material";
import Link from "next/link";
function SuccessPay({ setStep }) {
return (
<div className='w-full lg:w-[59%]'>
<div className="w-full lg:w-[59%]">
<div
className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
@@ -13,34 +13,44 @@ function SuccessPay({ setStep }) {
<div className="pt-[8px] pb-[4px] grid place-items-center">
<div className="flex flex-col justify-center items-center gap-[14px]">
<TickCircleGreenA />
<p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p>
<p className="text-[#3B3B3B] text-[20px] font-bold">
پرداخت شما با موفقیت انجام شد.
</p>
</div>
<p
className="text-[#3B3B3B] text-[16px] font-normal
mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px]
mb-[24px] md:mb-[16px]"
>برای نمایش نوبت ها به قسمت نوبت های من بروید. </p>
>
برای نمایش نوبت ها به قسمت نوبت های من بروید.{" "}
</p>
<div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
<span className="w-full block h-px bg-[#EFEFEF]"></span>
<div className="flex items-center justify-between my-[20px] gap-[80px]">
<p className="text-[#616161] text-[14px] font-medium">مقدار پرداخت شده: </p>
<p className="text-[#05BA58] text-[14px] font-bold">20،000 تومان</p>
<p className="text-[#616161] text-[14px] font-medium">
مقدار پرداخت شده:{" "}
</p>
<p className="text-[#05BA58] text-[14px] font-bold">
20،000 تومان
</p>
</div>
<span className="w-full block h-px bg-[#EFEFEF]"></span>
</div>
<Link href='/dashboard'>
<Link href="/dashboard">
<Button
variant="text"
className="!flex !items-center !justify-center !gap-[4px]"
>
<p className="text-[16px] font-medium text-[#5559CE]">برو به نوبت های من</p>
<p className="text-[16px] font-medium text-[#5559CE]">
برو به نوبت های من
</p>
<ArrowLeftBlueA />
</Button>
</Link>
</div>
</div>
</div>
)
);
}
export default SuccessPay
export default SuccessPay;
components/clinic/components/about/ContentDetail.js
+7 -9
View File
@@ -1,17 +1,15 @@
import TextLoading from '@/app/component/loading/Text'
import React from 'react'
import TextLoading from "@/app/component/loading/Text";
import React from "react";
function ContentDetail({ head, children, loading }) {
return (
<div className='my-[24px]'>
<div className="my-[24px]">
<TextLoading width={200} height={20} loading={loading}>
<p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p>
<p className="text-[#3B3B3B] text-[20px] font-bold">{head}</p>
</TextLoading>
<div className='mt-[16px]'>
{children}
<div className="mt-[16px]">{children}</div>
</div>
</div>
)
);
}
export default ContentDetail
export default ContentDetail;
components/clinic/components/about/ListBime.js
+10 -13
View File
@@ -1,27 +1,24 @@
import CustomLoading from '@/app/component/loading/Custom'
import Image from 'next/image'
import CustomLoading from "@/app/component/loading/Custom";
import Image from "next/image";
function ListBime({ data, loading }) {
return (
<ul className='flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]'>
<ul className="flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
{data.list_bime.map((item, idx) => (
<CustomLoading width={156} height={110} loading={loading}>
<li
key={idx}
className='p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]'
className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
>
<Image
src={item.img}
height={92}
width={92}
alt='bime'
/>
<p className='text-[#525252] text-[16px] font-medium'>{item.name}</p>
<Image src={item.img} height={92} width={92} alt="bime" />
<p className="text-[#525252] text-[16px] font-medium">
{item.name}
</p>
</li>
</CustomLoading>
))}
</ul>
)
);
}
export default ListBime
export default ListBime;
components/clinic/components/about/Services.js
+14 -13
View File
@@ -1,32 +1,33 @@
import TextLoading from '@/app/component/loading/Text';
import TickCircleOrange from '@/components/icons/TickCircleOrange';
import TextLoading from "@/app/component/loading/Text";
import TickCircleOrange from "@/components/icons/TickCircleOrange";
function Services({ data, loading }) {
return (
<ul className='
<ul
className="
mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px]
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]'>
{data.specialties.map((item, idx) => (
<li
key={idx}
className='flex items-start justify-start gap-2'
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
>
<div className='min-w-[24px] min-h-[24px]'>
{data.specialties.map((item, idx) => (
<li key={idx} className="flex items-start justify-start gap-2">
<div className="min-w-[24px] min-h-[24px]">
<TickCircleOrange />
</div>
<TextLoading width={80} height={18} loading={loading}>
<p
className={`
text-[16px] font-normal
${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
`}
>{item}</p>
>
{item}
</p>
</TextLoading>
</li>
))}
</ul>
)
);
}
export default Services
export default Services;
components/clinic/components/about/Specialties.js
+14 -13
View File
@@ -1,32 +1,33 @@
import TextLoading from '@/app/component/loading/Text';
import TickCircleOrange from '@/components/icons/TickCircleOrange';
import TextLoading from "@/app/component/loading/Text";
import TickCircleOrange from "@/components/icons/TickCircleOrange";
function Specialties({ data, loading }) {
return (
<ul className='
<ul
className="
mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px]
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]'>
{data.specialties.map((item, idx) => (
<li
key={idx}
className='flex items-start justify-start gap-2'
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
>
<div className='min-w-[24px] min-h-[24px]'>
{data.specialties.map((item, idx) => (
<li key={idx} className="flex items-start justify-start gap-2">
<div className="min-w-[24px] min-h-[24px]">
<TickCircleOrange />
</div>
<TextLoading width={80} height={18} loading={loading}>
<p
className={`
text-[16px] font-normal
${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
`}
>{item}</p>
>
{item}
</p>
</TextLoading>
</li>
))}
</ul>
)
);
}
export default Specialties
export default Specialties;
components/clinic/components/about/images/Images.js
+10 -9
View File
@@ -1,16 +1,17 @@
import List from './List';
import Slider from './Slider';
import Image from 'next/image';
import CustomLoading from '@/app/component/loading/Custom';
import List from "./List";
import Slider from "./Slider";
import Image from "next/image";
import CustomLoading from "@/app/component/loading/Custom";
function Images({ data, loading }) {
return (
<div
className='
className="
flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden
'>
<div className='w-full'>
"
>
<div className="w-full">
<CustomLoading loading={loading} width={600} height={400}>
<Image
className="rounded-[8px] overflow-hidden"
@@ -24,7 +25,7 @@ function Images({ data, loading }) {
<List data={data} loading={loading} />
<Slider data={data} loading={loading} />
</div>
)
);
}
export default Images
export default Images;
components/clinic/components/about/images/List.js
+12 -12
View File
@@ -1,11 +1,11 @@
import CustomLoading from '@/app/component/loading/Custom';
import Image from 'next/image';
import CustomLoading from "@/app/component/loading/Custom";
import Image from "next/image";
function List({ data, loading }) {
return (
<div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
<div className='w-full'>
<CustomLoading loading={loading} width='full' height={190}>
<div className="w-full">
<CustomLoading loading={loading} width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[1]}
@@ -15,8 +15,8 @@ function List({ data, loading }) {
/>
</CustomLoading>
</div>
<div className='w-full'>
<CustomLoading loading={loading} width='full' height={190}>
<div className="w-full">
<CustomLoading loading={loading} width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[2]}
@@ -26,8 +26,8 @@ function List({ data, loading }) {
/>
</CustomLoading>
</div>
<div className='w-full'>
<CustomLoading loading={loading} width='full' height={190}>
<div className="w-full">
<CustomLoading loading={loading} width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[3]}
@@ -37,8 +37,8 @@ function List({ data, loading }) {
/>
</CustomLoading>
</div>
<div className='w-full'>
<CustomLoading loading={loading} width='full' height={190}>
<div className="w-full">
<CustomLoading loading={loading} width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={data.images_clinic[4]}
@@ -49,7 +49,7 @@ function List({ data, loading }) {
</CustomLoading>
</div>
</div>
)
);
}
export default List
export default List;
components/clinic/components/about/images/Slider.js
+6 -5
View File
@@ -1,5 +1,5 @@
import CustomLoading from "@/app/component/loading/Custom"
import Image from "next/image"
import CustomLoading from "@/app/component/loading/Custom";
import Image from "next/image";
function Slider({ data, loading }) {
return (
@@ -16,9 +16,10 @@ function Slider({ data, loading }) {
className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
/>
</CustomLoading>
) : undefined)}
) : undefined
)}
</ul>
)
);
}
export default Slider
export default Slider;
components/clinic/components/about/index.js
+20 -13
View File
@@ -9,48 +9,55 @@ import ContentDetail from "./ContentDetail";
import MultilineLoading from "@/app/component/loading/Multiline";
function About({ data, loading }) {
const [isMore, setIsMore] = useState(false);
return (
<div className="opacity-page transition-all duration-500">
<Images data={data} loading={loading} />
<ContentDetail loading={loading} head='کلینیک تخصصی و فوق تخصصی نیکان'>
<ContentDetail loading={loading} head="کلینیک تخصصی و فوق تخصصی نیکان">
<div className="flex flex-col items-center justify-center">
<MultilineLoading line={10} loading={loading} width='full' height={18}>
<MultilineLoading
line={10}
loading={loading}
width="full"
height={18}
>
<p
className={`
text-[#525252] text-[16px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[32px] overflow-hidden relative
after:absolute after:right-0 after:bottom-0 after:h-[80px]
after:shadow-xl after:w-full transition-all duration-500
${isMore ?
'after:bg-transparent max-h-screen' :
'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
${
isMore
? "after:bg-transparent max-h-screen"
: "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
}
`}
dangerouslySetInnerHTML={{ __html: data.caption }}
></p>
</MultilineLoading>
<Button
className={`${loading && '!hidden'} !text-[#F17732] !text-[14px] !font-light !p-2`}
className={`${
loading && "!hidden"
} !text-[#F17732] !text-[14px] !font-light !p-2`}
onClick={() => setIsMore(!isMore)}
variant="text"
>
{isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
{isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
</Button>
</div>
</ContentDetail>
<ContentDetail head='بیمه های طرف قرارداد'>
<ContentDetail head="بیمه های طرف قرارداد">
<ListBime loading={loading} data={data} />
</ContentDetail>
<ContentDetail head='تخصص ها'>
<ContentDetail head="تخصص ها">
<Specialties loading={loading} data={data} />
</ContentDetail>
<ContentDetail head='خدمات'>
<ContentDetail head="خدمات">
<Services loading={loading} data={data} />
</ContentDetail>
</div>
)
);
}
export default About
export default About;

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