add loading all page & change bugs
This commit is contained in:
Ehsan
+59
-33
@@ -1,47 +1,73 @@
|
||||
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() {
|
||||
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'>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-1.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
|
||||
</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'>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-2.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
|
||||
</Link>
|
||||
<Link href='#' className='w-full cover-head-blogs'>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-3.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href='#' className='w-full cover-head-blogs'>
|
||||
<CustomLoading loading={loading} width='full' height={400}>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-4.png'
|
||||
src='/assets/images/head-blogs-1.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
|
||||
</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>
|
||||
|
||||
@@ -1,13 +1,26 @@
|
||||
'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);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
|
||||
<Title />
|
||||
<Head />
|
||||
<LatestArticles />
|
||||
<Head loading={loading} />
|
||||
<LatestArticles loading={loading} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,25 +1,37 @@
|
||||
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 }) {
|
||||
function Article({ data, loading }) {
|
||||
return (
|
||||
<li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<Image
|
||||
className='w-full'
|
||||
alt="article-img"
|
||||
src={data.src}
|
||||
height={217}
|
||||
width={392}
|
||||
/>
|
||||
</Link>
|
||||
<div className='p-[12px] md:p-[14px] lg:p-[16px]'>
|
||||
<CustomLoading width='full' height={200} 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>
|
||||
<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]'>
|
||||
<p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
|
||||
<p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
|
||||
<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>
|
||||
|
||||
@@ -2,7 +2,7 @@ import articles from '@/data/articles.json';
|
||||
import Article from "./Article";
|
||||
import Pagination from '@/app/component/Pagination';
|
||||
|
||||
function LatestArticles() {
|
||||
function LatestArticles({ loading }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p>
|
||||
@@ -11,6 +11,7 @@ function LatestArticles() {
|
||||
<Article
|
||||
data={item}
|
||||
key={item.id}
|
||||
loading={loading}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user