danak/danak-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ads + blog + ...

Browse Source
This commit is contained in:
hamid zarghami
2025-04-19 15:35:22 +03:30
parent cdc611a65d
commit 1bf0b56a63
20 changed files with 236 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/blogs/components/HeroSection.tsx
+45 -23
View File
@@ -2,40 +2,62 @@ import BlogItem from '@/components/BlogItem'
import Image from 'next/image'
import { FC } from 'react'
import { useGetBlogCombined } from '../hooks/useBlogsData'
import { AdsDisplayLocation } from '@/app/ads/types/AdsTypes'
import { useGetAds } from '@/app/ads/hooks/useAdsData'
const HeroSection: FC = () => {
const { data } = useGetBlogCombined()
const getAdsTopLeft = useGetAds(AdsDisplayLocation.BLOG_PAGE_TOP_LEFT)
return (
<div>
{
data?.data?.pinnedBlogs?.map((item, index: number) => {
if (index === 0) {
return (
<div key={item.id} className='relative rounded-4xl overflow-hidden'>
<Image
src={item.imageUrl}
alt={item.title}
width={1920}
height={1080}
className='w-full rounded-4xl object-cover xl:mt-14 mt-8 xl:min-h-[210px] min-h-[350px] max-h-[450px]'
/>
<div className='flex gap-8 xl:mt-14 mt-8'>
{
data?.data?.pinnedBlogs?.map((item, index: number) => {
if (index === 0) {
return (
<div key={item.id} className='relative flex-[2] rounded-4xl overflow-hidden h-fit bg-red-50'>
<Image
src={item.imageUrl}
alt={item.title}
width={1920}
height={1080}
className='w-full rounded-4xl object-cover xl:min-h-[210px] min-h-[350px] max-h-[450px]'
/>
<div className='absolute bottom-0 h-[140px] modalGlass3 w-full p-6 text-white'>
<h4 className='font-bold xl:text-base text-sm'>
{item.title}
</h4>
<div className='absolute bottom-0 h-[140px] modalGlass3 w-full p-6 text-white'>
<h4 className='font-bold xl:text-base text-sm'>
{item.title}
</h4>
<div className="text-xs xl:text-sm mt-4 leading-7 truncate xl:text-clip xl:whitespace-normal">
{item.previewContent.replace(/<\/?[^>]+(>|$)/g, "")}
<div className="text-xs xl:text-sm mt-4 leading-7 truncate xl:text-clip xl:whitespace-normal line-clamp-2">
{item.previewContent.replace(/<\/?[^>]+(>|$)/g, "")}
</div>
</div>
</div>
)
}
})
}
{
getAdsTopLeft.isSuccess && getAdsTopLeft.data.data.ads[0] &&
<a href={getAdsTopLeft.data?.data?.ads[0].link} target='_blank' className='flex-1 overflow-hidden relative hidden xl:flex bg-gray-100 rounded-4xl items-center justify-center'>
<Image
alt={getAdsTopLeft.data.data.ads[0].title}
width={261}
height={550}
src={getAdsTopLeft.data.data.ads[0].imageUrl}
className='w-full h-full backdrop-blur-[100px] aspect-square object-cover'
/>
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
<div className='max-w-[80%] text-sm leading-6 text-white'>
{getAdsTopLeft.data.data.ads[0].title}
</div>
)
}
})
}
</div>
</a>
}
</div>
<div className='flex xl:flex-row flex-col gap-8 mt-10'>