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/blogs/Head.js
+59 -33
View File
@@ -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>