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