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

change data blog item and clinic item & change pages clinic and clinic to ssr & remove loading & handle pagination page clinics

Browse Source
This commit is contained in:
Ehsan
2025-06-02 06:04:49 +03:30
parent e292176a61
commit 0217e5e67e
35 changed files with 194 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blog/[slug]/page.js
+11 -3
View File
@@ -1,13 +1,21 @@
import axios from "axios";
import BlogPage from "@/components/blog";
import articles from "@/data/articles.json";
import Layout from "@/components/layout/StLayout";
function Blog({ params: { slug } }) {
const article = articles.find((item) => item.id === +slug);
async function Blog({ params: { slug } }) {
const blog = await axios.get(
`https://back-dev.clinic-pro.ir/api/v1/blog/${slug}`
);
const blogs = await axios.get("https://back-dev.clinic-pro.ir/api/v1/blogs");
const resBlog = blog.data;
const resBlogs = blogs.data;
console.log(resBlogs);
return (
<Layout>
<BlogPage article={article} articles={articles} />
<BlogPage blog={resBlog} blogs={resBlogs} />
</Layout>
);
}
app/blogs/page.js
+8 -4
View File
@@ -1,12 +1,16 @@
import BlogsPage from "@/components/blogs";
import Layout from "@/components/layout/StLayout";
import axios from "axios";
export default async function Blogs() {
const response = await axios.get(
"https://back-dev.clinic-pro.ir/api/v1/blogs"
);
const blogs = response.data.blogs;
function Blogs() {
return (
<Layout name="/blogs">
<BlogsPage />
<BlogsPage blogs={blogs} />
</Layout>
);
}
export default Blogs;
app/component/ItemDoctor.js
+10 -10
View File
@@ -1,5 +1,5 @@
import Image from "next/image";
import { Button, Skeleton } from "@mui/material";
import { Button } from "@mui/material";
// Icons
import ArrowLeftD from "@/components/icons/ArrowLeftD";
@@ -11,12 +11,12 @@ import CustomLoading from "./loading/Custom";
import TextLoading from "./loading/Text";
import CircularLoading from "./loading/Circular";
function ItemDoctor({ doctor, loading }) {
function ItemDoctor({ doctor }) {
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}>
<CircularLoading width={66} height={66}>
<Image
width={72}
height={72}
@@ -26,17 +26,17 @@ function ItemDoctor({ doctor, loading }) {
/>
</CircularLoading>
<div className="flex flex-col items-start justify-center gap-2">
<TextLoading width={90} height={15} loading={loading}>
<TextLoading width={90} height={15}>
<p className="text-[#3B3B3B] text-[14px] font-bold">
{doctor.name}
</p>
</TextLoading>
<TextLoading width={120} height={15} loading={loading}>
<TextLoading width={120} height={15}>
<p className="text-[#616161] text-[14px] font-normal">
تخصص: {doctor.expertise}
</p>
</TextLoading>
<CustomLoading width={100} height={25} loading={loading}>
<CustomLoading width={100} height={25}>
<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 />
@@ -58,13 +58,13 @@ function ItemDoctor({ doctor, loading }) {
{/* Hours of work */}
<div className="flex my-4 items-center justify-start gap-0.5">
<ClockD />
<TextLoading width={150} height={15} loading={loading}>
<TextLoading width={150} height={15}>
<p className="text-[#7E7E7E] text-[12px] font-normal">
ساعت کاری: {doctor.hours_of_work}
</p>
</TextLoading>
</div>
<CustomLoading loading={loading} width={150} height={20}>
<CustomLoading width={150} height={20}>
<p
className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
${
@@ -83,9 +83,9 @@ function ItemDoctor({ doctor, loading }) {
<Button
variant="contained"
className={`!p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit
${!Number(doctor.active) || (loading && "!bg-[#D7D7D7]")}
${!Number(doctor.active)}
`}
disabled={!Number(doctor.active) || loading}
disabled={!Number(doctor.active)}
>
<ArrowLeftD />
</Button>
app/component/comment/ItemUser.js
+26 -64
View File
@@ -9,15 +9,7 @@ import DisLikeComment from "@/components/icons/DisLikeComment";
import ArrowUpComment from "@/components/icons/ArrowUpComment";
import LikeComment from "@/components/icons/LikeComment";
function ItemUser({
update,
setUpdate,
isReply,
list,
setList,
data,
loading,
}) {
function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
if (nameIsLike === "is_like" && data.is_dislike) {
data.is_dislike = false;
@@ -34,46 +26,26 @@ function ItemUser({
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"
/>
)}
<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>
</>
)}
<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>
)}
<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
@@ -83,19 +55,15 @@ function ItemUser({
data.is_like ? data.like - 1 : data.like + 1,
data,
"like",
"is_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>
)}
<p className="text-[#6C757D] text-[12px] font-normal select-none">
{data.like}
</p>
</div>
<div className="flex items-center justify-start gap-1">
<div
@@ -105,19 +73,15 @@ function ItemUser({
data.is_dislike ? data.dislike - 1 : data.dislike + 1,
data,
"dislike",
"is_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>
)}
<p className="text-[#6C757D] text-[12px] font-normal select-none">
{data.dislike}
</p>
</div>
<Button
className="!text-[#495057] !text-[12px] !font-medium"
@@ -164,8 +128,7 @@ function ItemUser({
</div>
)}
<ul
className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
${loading && "w-full"}
className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 w-full
${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
>
{data.replays.map((item, idx) => (
@@ -174,7 +137,6 @@ function ItemUser({
data={item}
isReply={true}
update={update}
loading={loading}
setUpdate={setUpdate}
/>
))}
app/component/comment/index.js
+1 -2
View File
@@ -2,7 +2,7 @@
import { useState } from "react";
import ItemUser from "./ItemUser";
function Comment({ data, loading }) {
function Comment({ data }) {
const [list, setList] = useState(data?.comments);
const [update, setUpdate] = useState(false);
@@ -21,7 +21,6 @@ function Comment({ data, loading }) {
data={item}
update={update}
setList={setList}
loading={loading}
setUpdate={setUpdate}
/>
))}
app/component/openLocation/Content.js
+9 -2
View File
@@ -23,9 +23,16 @@ function Content({ handleClose }) {
<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">
<li
key={idx}
className="flex items-center flex-col justify-center gap-1"
>
<Image
className="w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]"
className="
w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]
min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px]
max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px]
"
src={item.src}
alt="icon app"
height={40}
components/blog/relatedContent/index.js
+1 -1
View File
@@ -10,7 +10,7 @@ function RelatedContent({ data, loading }) {
<UnderlineLG />
</AnimationTextHead>
<ul className="flex w-full lg:w-fit flex-col justify-start items-start">
{data.map((item, idx) => (
{data?.map((item, idx) => (
<Item idx={idx} data={item} key={item.id} loading={loading} />
))}
</ul>
components/blogs/Head.js
+25 -57
View File
@@ -3,11 +3,11 @@ import TextLoading from "@/app/component/loading/Text";
import Image from "next/image";
import Link from "next/link";
function Head({ loading }) {
function Head() {
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}>
<CustomLoading width="full" height={400}>
<Image
src="/assets/images/head-blogs-1.png"
width={600}
@@ -15,24 +15,16 @@ function Head({ loading }) {
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>
<TextLoading width={150} height={20}>
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
روش های خانگی محافظت از پوست در تابستان
</p>
</TextLoading>
</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}>
<CustomLoading width="full" height={180}>
<Image
src="/assets/images/head-blogs-2.png"
width={600}
@@ -40,22 +32,14 @@ function Head({ loading }) {
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>
<TextLoading width={150} height={20}>
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
فواید نوشیدن آب برای سلامتی
</p>
</TextLoading>
</Link>
<Link href="#" className="w-full cover-head-blogs">
<CustomLoading loading={loading} width="full" height={180}>
<CustomLoading width="full" height={180}>
<Image
src="/assets/images/head-blogs-3.png"
width={600}
@@ -63,23 +47,15 @@ function Head({ loading }) {
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>
<TextLoading width={150} height={20}>
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
راهکارهای ساده برای درمان سر درد
</p>
</TextLoading>
</Link>
</div>
<Link href="#" className="w-full cover-head-blogs">
<CustomLoading loading={loading} width="full" height={180}>
<CustomLoading width="full" height={180}>
<Image
src="/assets/images/head-blogs-4.png"
width={600}
@@ -87,19 +63,11 @@ function Head({ loading }) {
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>
<TextLoading width={150} height={20}>
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
تغذیه مناسب برای کاهش فشار خون
</p>
</TextLoading>
</Link>
</div>
</div>
components/blogs/index.js
+3 -13
View File
@@ -1,25 +1,15 @@
"use client";
import { useEffect, useState } from "react";
import Head from "./Head";
import Title from "./title";
import LatestArticles from "./latestArticles";
function BlogsPage() {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
function BlogsPage({ blogs }) {
return (
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
<Title />
<Head loading={loading} />
<LatestArticles loading={loading} />
<Head />
<LatestArticles blogs={blogs} />
</div>
);
}
components/blogs/latestArticles/Article.js
+12 -14
View File
@@ -3,11 +3,11 @@ import TextLoading from "@/app/component/loading/Text";
import Image from "next/image";
import Link from "next/link";
function Article({ data, loading }) {
function Article({ data }) {
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}`}>
<CustomLoading width="full" height={200}>
<Link href={`/blog/${data.uuid}`}>
<Image
className="w-full"
alt="article-img"
@@ -18,22 +18,20 @@ function Article({ data, loading }) {
</Link>
</CustomLoading>
<div className="p-[12px] md:p-[14px] lg:p-[16px]">
<div className={loading ? "mb-[12px] md:mb-[14px] lg:mb-[16px]" : ""}>
<TextLoading width={150} height={18} loading={loading}>
<Link href={`/blog/${data.id}`}>
<h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
{data.title}
</h1>
</Link>
</TextLoading>
</div>
<TextLoading width={150} height={18}>
<Link href={`/blog/${data.uuid}`}>
<h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
{data.title}
</h1>
</Link>
</TextLoading>
<div className="flex items-center justify-start gap-[35px]">
<TextLoading width={100} height={18} loading={loading}>
<TextLoading width={100} height={18}>
<p className="text-[#9B9B9B] text-[14px] font-medium">
تاریخ انتشار: {data.date_of_release}
</p>
</TextLoading>
<TextLoading width={110} height={18} loading={loading}>
<TextLoading width={110} height={18}>
<p className="text-[#9B9B9B] text-[14px] font-medium">
زمان مطالعه: {data.time}
</p>
components/blogs/latestArticles/index.js
+4 -5
View File
@@ -1,20 +1,19 @@
import articles from "@/data/articles.json";
import Article from "./Article";
import Pagination from "@/app/component/Pagination";
function LatestArticles({ loading }) {
function LatestArticles({ blogs }) {
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} />
{blogs.map((item) => (
<Article data={item} key={item.uuid} />
))}
</ul>
<div className="mt-[56px] flex justify-center">
<Pagination />
<Pagination list={blogs} itemsPerPage={12} />
</div>
</div>
);
components/clinic/components/about/ContentDetail.js
+2 -2
View File
@@ -1,10 +1,10 @@
import TextLoading from "@/app/component/loading/Text";
import React from "react";
function ContentDetail({ head, children, loading }) {
function ContentDetail({ head, children }) {
return (
<div className="my-[24px]">
<TextLoading width={200} height={20} loading={loading}>
<TextLoading width={200} height={20}>
<h1 className="text-[#3B3B3B] text-[20px] font-bold">{head}</h1>
</TextLoading>
<div className="mt-[16px]">{children}</div>
components/clinic/components/about/ListBime.js
+2 -2
View File
@@ -4,7 +4,7 @@ import { Button } from "@mui/material";
import Image from "next/image";
import { useRef } from "react";
function ListBime({ data, loading }) {
function ListBime({ data }) {
const list = useRef();
const handleScroll = (type) => {
@@ -28,7 +28,7 @@ function ListBime({ data, loading }) {
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}>
<CustomLoading width={156} height={110}>
<li
key={idx}
className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
components/clinic/components/about/Services.js
+2 -2
View File
@@ -1,7 +1,7 @@
import TextLoading from "@/app/component/loading/Text";
import TickCircleOrange from "@/components/icons/TickCircleOrange";
function Services({ data, loading }) {
function Services({ data }) {
return (
<ul
className="
@@ -14,7 +14,7 @@ function Services({ data, loading }) {
<div className="min-w-[24px] min-h-[24px]">
<TickCircleOrange />
</div>
<TextLoading width={80} height={18} loading={loading}>
<TextLoading width={80} height={18}>
<h3
className={`
text-[16px] font-normal
components/clinic/components/about/Specialties.js
+2 -2
View File
@@ -1,7 +1,7 @@
import TextLoading from "@/app/component/loading/Text";
import TickCircleOrange from "@/components/icons/TickCircleOrange";
function Specialties({ data, loading }) {
function Specialties({ data }) {
return (
<ul
className="
@@ -14,7 +14,7 @@ function Specialties({ data, loading }) {
<div className="min-w-[24px] min-h-[24px]">
<TickCircleOrange />
</div>
<TextLoading width={80} height={18} loading={loading}>
<TextLoading width={80} height={18}>
<h3
className={`
text-[16px] font-normal
components/clinic/components/about/images/Images.js
+10 -5
View File
@@ -3,7 +3,7 @@ import Slider from "./Slider";
import Image from "next/image";
import CustomLoading from "@/app/component/loading/Custom";
function Images({ data, loading }) {
function Images({ data }) {
return (
<div
className="
@@ -12,18 +12,23 @@ function Images({ data, loading }) {
"
>
<div className="w-full">
<CustomLoading loading={loading} width={600} height={400}>
<CustomLoading width={600} height={400}>
<Image
className="rounded-[8px] overflow-hidden"
src={data?.images_clinic && !!data?.images_clinic.length && data?.images_clinic[0] || ""}
src={
(data?.images_clinic &&
!!data?.images_clinic.length &&
data?.images_clinic[0]) ||
""
}
alt="img clinic"
height={432}
width={600}
/>
</CustomLoading>
</div>
<List data={data} loading={loading} />
<Slider data={data} loading={loading} />
<List data={data} />
<Slider data={data} />
</div>
);
}
components/clinic/components/about/images/List.js
+5 -5
View File
@@ -1,11 +1,11 @@
import CustomLoading from "@/app/component/loading/Custom";
import Image from "next/image";
function List({ data, loading }) {
function List({ data }) {
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}>
<CustomLoading width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={
@@ -21,7 +21,7 @@ function List({ data, loading }) {
</CustomLoading>
</div>
<div className="w-full">
<CustomLoading loading={loading} width="full" height={190}>
<CustomLoading width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={
@@ -37,7 +37,7 @@ function List({ data, loading }) {
</CustomLoading>
</div>
<div className="w-full">
<CustomLoading loading={loading} width="full" height={190}>
<CustomLoading width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={
@@ -53,7 +53,7 @@ function List({ data, loading }) {
</CustomLoading>
</div>
<div className="w-full">
<CustomLoading loading={loading} width="full" height={190}>
<CustomLoading width="full" height={190}>
<Image
className="rounded-[8px] overflow-hidden"
src={
components/clinic/components/about/images/Slider.js
+2 -2
View File
@@ -1,14 +1,14 @@
import CustomLoading from "@/app/component/loading/Custom";
import Image from "next/image";
function Slider({ data, loading }) {
function Slider({ data }) {
return (
<ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
{data &&
data.images_clinic &&
[...data?.images_clinic, ...data?.images_clinic]?.map((item, idx) =>
idx !== 0 ? (
<CustomLoading width={90} height={90} loading={loading}>
<CustomLoading width={90} height={90}>
<Image
key={idx}
src={item}
components/clinic/components/about/index.js
+8 -15
View File
@@ -8,20 +8,15 @@ import Specialties from "./Specialties";
import ContentDetail from "./ContentDetail";
import MultilineLoading from "@/app/component/loading/Multiline";
function About({ data, loading }) {
function About({ data }) {
const [isMore, setIsMore] = useState(false);
return (
<div className="opacity-page transition-all duration-500">
<Images data={data} loading={loading} />
<ContentDetail loading={loading} head="کلینیک تخصصی و فوق تخصصی نیکان">
<Images data={data} />
<ContentDetail head="کلینیک تخصصی و فوق تخصصی نیکان">
<div className="flex flex-col items-center justify-center">
<MultilineLoading
line={10}
loading={loading}
width="full"
height={18}
>
<MultilineLoading line={10} width="full" height={18}>
<p
className={`
text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative
@@ -37,9 +32,7 @@ function About({ data, loading }) {
></p>
</MultilineLoading>
<Button
className={`${
loading && "!hidden"
} !text-[#F17732] !text-[14px] !font-light !p-2`}
className='!text-[#F17732] !text-[14px] !font-light !p-2'
onClick={() => setIsMore(!isMore)}
variant="text"
>
@@ -48,13 +41,13 @@ function About({ data, loading }) {
</div>
</ContentDetail>
<ContentDetail head="بیمه های طرف قرارداد">
<ListBime loading={loading} data={data} />
<ListBime data={data} />
</ContentDetail>
<ContentDetail head="تخصص ها">
<Specialties loading={loading} data={data} />
<Specialties data={data} />
</ContentDetail>
<ContentDetail head="خدمات">
<Services loading={loading} data={data} />
<Services data={data} />
</ContentDetail>
</div>
);
components/clinic/components/contact/ContentDetail.js
+3 -3
View File
@@ -1,14 +1,14 @@
import TextLoading from "@/app/component/loading/Text";
function ContentDetail({ head, detail, loading }) {
function ContentDetail({ head, detail }) {
return (
<li className="flex flex-col items-start justify-center gap-4">
<TextLoading width={100} height={18} loading={loading}>
<TextLoading width={100} height={18}>
<p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
{head}
</p>
</TextLoading>
<TextLoading width={160} height={18} loading={loading}>
<TextLoading width={160} height={18}>
<p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
</TextLoading>
</li>
components/clinic/components/contact/Detail.js
+3 -5
View File
@@ -1,20 +1,18 @@
import ContentDetail from "./ContentDetail";
function Detail({ data, loading }) {
function Detail({ data }) {
return (
<ul className="flex flex-col items-start justify-start gap-[16px]">
<ContentDetail
head="روزهای کاری: "
loading={loading}
detail={`ساعت کاری: ${data.hours_of_work}`}
/>
<ContentDetail
head="تلفن: "
loading={loading}
detail={`${data.phone_number_1} ${data.phone_number_2}`}
/>
<ContentDetail head="ایمیل:" loading={loading} detail={data.email} />
<ContentDetail head="آدرس: " loading={loading} detail={data.location} />
<ContentDetail head="ایمیل:" detail={data.email} />
<ContentDetail head="آدرس: " detail={data.location} />
</ul>
);
}
components/clinic/components/contact/index.js
+3 -3
View File
@@ -7,7 +7,7 @@ import RoutingC from "@/components/icons/RoutingC";
import ModalOpenLocation from "@/app/component/openLocation";
import CustomLoading from "@/app/component/loading/Custom";
function Contact({ data, loading }) {
function Contact({ data }) {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
@@ -21,7 +21,7 @@ function Contact({ data, loading }) {
"
>
<div className="flex items-end justify-between">
<Detail data={data} loading={loading} />
<Detail data={data} />
<ModalOpenLocation
open={open}
setOpen={setOpen}
@@ -38,7 +38,7 @@ function Contact({ data, loading }) {
</ModalOpenLocation>
</div>
<div className="w-full relative h-[460px] mt-[24px]">
<CustomLoading width="full" height={400} loading={loading}>
<CustomLoading width="full" height={400}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
className="w-full h-full rounded-lg"
components/clinic/components/doctors/List.js
+2 -2
View File
@@ -1,12 +1,12 @@
import ItemDoctor from "@/app/component/ItemDoctor";
import Pagination from "@/app/component/Pagination";
function List({ doctors, loading }) {
function List({ doctors }) {
return (
<>
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
{doctors.map((doctor) => (
<ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
<ItemDoctor key={doctor.id} doctor={doctor} />
))}
</ul>
<div className="mt-[56px] flex justify-center">
components/clinic/components/doctors/index.js
+2 -2
View File
@@ -5,7 +5,7 @@ import List from "./List";
import { useState } from "react";
import { searchOnList } from "@/helper";
function Doctors({ doctors, loading }) {
function Doctors({ doctors }) {
const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
const handleSearch = (value) =>
@@ -20,7 +20,7 @@ function Doctors({ doctors, loading }) {
placeholder="جستجوی پزشک یا تخصص"
/>
</div>
<List loading={loading} doctors={filteredSpecialties} />
<List doctors={filteredSpecialties} />
</div>
);
}
components/clinic/index.js
+4 -11
View File
@@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useState } from "react";
import About from "./components/about";
import Contact from "./components/contact";
@@ -11,21 +11,14 @@ const listTab = ["درباره کلینیک", "اطلاعات تماس", "پزش
function ClinicPage({ data, doctors }) {
const [value, setValue] = useState(0);
const [loading, setLoading] = useState(true);
const handleChange = (event, newValue) => setValue(newValue);
const Components = [
<About data={data} loading={loading} />,
<Contact data={data} loading={loading} />,
<Doctors doctors={doctors} loading={loading} />,
<About data={data} />,
<Contact data={data} />,
<Doctors doctors={doctors} />,
];
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
return (
<div className="pt-[40px] sm:pt-[70px] md:pt-[100px] lg:pt-[136px] mt-[40px] padding-responsive">
<Tabs
components/clinics/index.js
-3
View File
@@ -22,9 +22,6 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
current.set("search", value);
const queryString = current.toString();
router.push(`/clinics?${queryString}`);
// const searchOnName = searchOnList(clinics, value, "title");
// const searchOnLocation = searchOnList(searchOnName, selected.city, "city");
// setFilteredClinics(searchOnLocation);
};
return (
components/doctor/detailDoctor/Title.js
+7 -7
View File
@@ -6,10 +6,10 @@ import StarDI from "@/components/icons/StarDI";
import TickCircle from "@/components/icons/TickCircle";
import Image from "next/image";
function Title({ doctor, loading }) {
function Title({ doctor }) {
return (
<div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
<CircularLoading loading={loading} width={100} height={100}>
<CircularLoading width={100} height={100}>
<Image
className="
w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
@@ -22,18 +22,18 @@ function Title({ doctor, loading }) {
/>
</CircularLoading>
<div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
<TextLoading loading={loading} width={90} height={20}>
<TextLoading width={90} height={20}>
<h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
{doctor?.title}
</h1>
</TextLoading>
<TextLoading loading={loading} width={100} height={20}>
<TextLoading width={100} height={20}>
<h3 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
تخصص: {doctor?.expertise}
</h3>
</TextLoading>
<div className="flex items-center justify-start gap-11">
<TextLoading loading={loading} width={60} height={20}>
<TextLoading width={60} height={20}>
<p className="text-[#525252] text-[16px] font-medium">
{doctor?.experience} سال تجربه
</p>
@@ -42,14 +42,14 @@ function Title({ doctor, loading }) {
<div className="hidden lg:flex">
<TickCircle />
</div>
<TextLoading loading={loading} width={120} height={20}>
<TextLoading width={120} height={20}>
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">
کد نظام پزشکی: {doctor?.medical_system_code}
</p>
</TextLoading>
</div>
</div>
<CustomLoading loading={loading} width={160} height={25}>
<CustomLoading width={160} height={25}>
<div className="flex items-center justify-start gap-2">
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
components/doctor/detailDoctor/cards/AboutDcotor.js
+3 -3
View File
@@ -5,7 +5,7 @@ import { Button } from "@mui/material";
import MultilineLoading from "@/app/component/loading/Multiline";
import TextLoading from "@/app/component/loading/Text";
function AboutDcotor({ doctor, loading }) {
function AboutDcotor({ doctor }) {
const [isMore, setIsMore] = useState(false);
return (
@@ -15,7 +15,7 @@ function AboutDcotor({ doctor, loading }) {
className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
></a>
<div className="flex flex-col items-center justify-center">
<MultilineLoading loading={loading} width="full" height={18} line={30}>
<MultilineLoading width="full" height={18} line={30}>
<p
className={`
text-[#616161] text-[14px] font-normal overflow-hidden relative
@@ -47,7 +47,7 @@ function AboutDcotor({ doctor, loading }) {
{doctor?.specialties?.map((item, idx) => (
<li key={idx} className="flex items-center justify-start gap-1">
<span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
<TextLoading loading={loading} width={70} height={18}>
<TextLoading width={70} height={18}>
<h4 className="text-[#616161] text-[16px] font-normal text-nowrap">
{item}
</h4>
components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js
+2 -2
View File
@@ -2,10 +2,10 @@ import CircularLoading from "@/app/component/loading/Circular";
import { numberToArStyle } from "@/helper";
import { CircularProgress } from "@mui/material";
function ProgressAll({ doctor, loading }) {
function ProgressAll({ doctor }) {
return (
<div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
<CircularLoading loading={loading} width={120} height={120}>
<CircularLoading width={120} height={120}>
<CircularProgress
variant="determinate"
value={doctor?.total_user_satisfaction}
components/doctor/detailDoctor/cards/comments/chart/index.js
+8 -12
View File
@@ -6,7 +6,7 @@ import ProgressDetail from "@/app/component/ProfressDetail";
import TextLoading from "@/app/component/loading/Text";
import CustomLoading from "@/app/component/loading/Custom";
function Chart({ doctor, loading }) {
function Chart({ doctor }) {
return (
<div
className="
@@ -14,7 +14,7 @@ function Chart({ doctor, loading }) {
pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
"
>
<TextLoading loading={loading} width={130} height={20}>
<TextLoading width={130} height={20}>
<div className="flex items-center justify-start gap-2.5">
<p className="text-[#616161] text-[14px] font-medium">
امتیاز کلی کاربران: {doctor?.overall_score} از 5
@@ -24,8 +24,8 @@ function Chart({ doctor, loading }) {
</p>
</div>
</TextLoading>
<div className={`${loading ? "mt-4 mb-6" : "mt-0 mb-0"} hidden md:flex`}>
<TextLoading loading={loading} width={160} height={20}>
<div className="mt-0 mb-0 hidden md:flex">
<TextLoading width={160} height={20}>
<Rating
readOnly
value={4}
@@ -36,7 +36,7 @@ function Chart({ doctor, loading }) {
</TextLoading>
</div>
<div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
<CustomLoading loading={loading} width={130} height={30}>
<CustomLoading width={130} height={30}>
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
@@ -52,18 +52,14 @@ function Chart({ doctor, loading }) {
</CustomLoading>
</div>
<div className="flex flex-wrap items-center justify-center gap-[50px]">
<ul
className={`flex w-full flex-col items-start justify-start gap-1.5 ${
loading ? "lg:w-full" : "lg:w-fit"
}`}
>
<ul className="flex w-full flex-col items-start justify-start gap-1.5 lg:w-fit">
{doctor?.progress_detail?.map((item, idx) => (
<TextLoading width="full" key={idx} height={20} loading={loading}>
<TextLoading width="full" key={idx} height={20}>
<ProgressDetail data={item} />
</TextLoading>
))}
</ul>
<ProgressAll doctor={doctor} loading={loading} />
<ProgressAll doctor={doctor} />
</div>
</div>
);
components/doctor/detailDoctor/cards/comments/index.js
+3 -3
View File
@@ -2,7 +2,7 @@ import Chart from "./chart";
import Comment from "@/app/component/comment";
import ModalAnswer from "./modal/ModalAnswer";
function Comments({ doctor, loading }) {
function Comments({ doctor }) {
return (
<div className="mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]">
<a
@@ -18,8 +18,8 @@ function Comments({ doctor, loading }) {
</p>
<ModalAnswer doctor={doctor} />
</div>
<Chart doctor={doctor} loading={loading} />
<Comment data={doctor} loading={loading} />
<Chart doctor={doctor} />
<Comment data={doctor} />
</div>
);
}
components/doctor/detailDoctor/cards/locations/index.js
+2 -2
View File
@@ -1,7 +1,7 @@
import CustomLoading from "@/app/component/loading/Custom";
import Item from "./Item";
function Locations({ doctor, loading }) {
function Locations({ doctor }) {
return (
<div>
<p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
@@ -9,7 +9,7 @@ function Locations({ doctor, loading }) {
</p>
<ul className="flex w-full mt-[24px] flex-col justify-center items-start">
{doctor?.locations?.map((item, idx) => (
<CustomLoading key={idx} loading={loading} width="full" height={40}>
<CustomLoading key={idx} width="full" height={40}>
<li className="w-full">
<Item data={item} />
{doctor?.locations.length > idx + 1 && (
components/doctor/detailDoctor/index.js
+5 -5
View File
@@ -5,17 +5,17 @@ import AboutDcotor from "./cards/AboutDcotor";
import Comments from "./cards/comments";
import Locations from "./cards/locations";
function DetailDoctor({ doctor, loading }) {
function DetailDoctor({ doctor }) {
return (
<div className="w-full lg:w-[59%]">
<div className="hidden lg:flex">
<Share />
</div>
<Title doctor={doctor} loading={loading} />
<Title doctor={doctor} />
<Link />
<AboutDcotor loading={loading} doctor={doctor} />
<Locations loading={loading} doctor={doctor} />
<Comments loading={loading} doctor={doctor} />
<AboutDcotor doctor={doctor} />
<Locations doctor={doctor} />
<Comments doctor={doctor} />
</div>
);
}
components/doctor/index.js
+3 -3
View File
@@ -7,7 +7,7 @@ function DoctorPage({ doctor }) {
return (
<div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
<div className="flex items-center justify-between">
<CustomLoading loading={false} width={180} height={25}>
<CustomLoading width={180} height={25}>
<div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
<h2 className="text-[#9B9B9B] text-nowrap">
متخصص {doctor?.expertise} {" >"}
@@ -20,8 +20,8 @@ function DoctorPage({ doctor }) {
</div>
</div>
<div className="flex items-start justify-center gap-6 mt-[30px]">
<DetailDoctor doctor={doctor} loading={false} />
<AppointmentList doctor={doctor} loading={false} />
<DetailDoctor doctor={doctor} />
<AppointmentList doctor={doctor} />
</div>
</div>
);
services/response.js
+1
View File
@@ -30,4 +30,5 @@ export const request = {
});
},
getUserProfile: (uuid) => api.get(`/api/v1/user-profile/${uuid}`),
};