change data blog item and clinic item & change pages clinic and clinic to ssr & remove loading & handle pagination page clinics
This commit is contained in:
Ehsan
+25
-57
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user