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

add loading all page & change bugs

Browse Source
This commit is contained in:
Ehsan
2024-09-05 22:20:18 +03:30
parent 087ed4a818
commit c45a161fcb
72 changed files with 1208 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/blog/detail/Caption.js
+37 -23
View File
@@ -1,31 +1,45 @@
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 }) {
function Caption({ data, loading }) {
return (
<>
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data.cover_first}
alt="cover-blog"
height={570}
width={808}
/>
<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 }}
/>
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data.cover_second}
alt="cover-blog"
height={570}
width={808}
/>
<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 }}
/>
<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>
</>
)
}
components/blog/detail/SocialMedia.js
+10 -7
View File
@@ -1,3 +1,4 @@
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"
@@ -8,16 +9,18 @@ const socials = [
<LinkedinB />
]
function SocialMedia() {
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) => (
<li
key={idx}
className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
>
{item}
</li>
<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>
components/blog/detail/commentUser/index.js
+2 -2
View File
@@ -4,14 +4,14 @@ import Underline from '@/components/icons/Underline'
import React from 'react'
import AddComment from './AddComment'
function CommentUser({ data }) {
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} />
<Comment data={data} loading={loading} />
</div>
)
}
components/blog/detail/index.js
+4 -4
View File
@@ -2,12 +2,12 @@ import Caption from "./Caption";
import SocialMedia from "./SocialMedia";
import CommentUser from "./commentUser";
function Detail({ data }) {
function Detail({ data, loading }) {
return (
<div className="w-full lg:w-[68%]">
<Caption data={data} />
<SocialMedia />
<CommentUser data={data} />
<Caption data={data} loading={loading} />
<SocialMedia loading={loading} />
<CommentUser data={data} loading={loading} />
</div>
)
}
components/blog/head/index.js
+20 -8
View File
@@ -1,20 +1,32 @@
function Head({ data }) {
import TextLoading from "@/app/component/loading/Text"
function Head({ data, loading }) {
return (
<div>
<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>
<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>
<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>
<div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">تاریخ انتشار:</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</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>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</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>
components/blog/index.js
+15 -3
View File
@@ -1,14 +1,26 @@
'use client'
import { useEffect, useState } from "react";
import Detail from "./detail";
import Head from "./head";
import RelatedContent from "./relatedContent";
function BlogPage({ article, articles }) {
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]">
<Head data={article} />
<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} />
<RelatedContent data={articles} />
<Detail data={article} loading={loading} />
<RelatedContent data={articles} loading={loading} />
</div>
</div>
)
components/blog/relatedContent/Item.js
+27 -18
View File
@@ -1,31 +1,40 @@
import CircularLoading from "@/app/component/loading/Circular";
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 Item({ data, idx }) {
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]">
<Link href={`/blog/${data.id}`}>
<Image
className="
<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>
<div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
<Link href={`/blog/${data.id}`}>
<p
className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
>{data.title}</p>
src={data.src}
alt="article"
height={88}
width={97}
/>
</Link>
<p
className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
>تاریخ انتشار: {data.date_of_release}</p>
</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>
components/blog/relatedContent/index.js
+2 -1
View File
@@ -3,7 +3,7 @@ import UnderlineLG from '@/components/icons/UnderlineLG'
import React from 'react'
import Item from './Item'
function RelatedContent({ data }) {
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='مطالب مرتبط'>
@@ -15,6 +15,7 @@ function RelatedContent({ data }) {
idx={idx}
data={item}
key={item.id}
loading={loading}
/>
))}
</ul>