hamid zarghami
81 lines
3.7 KiB
TypeScript
81 lines
3.7 KiB
TypeScript
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'
|
|
import Link from 'next/link'
|
|
|
|
const HeroSection: FC = () => {
|
|
|
|
const { data } = useGetBlogCombined()
|
|
const getAdsTopLeft = useGetAds(AdsDisplayLocation.BLOG_PAGE_TOP_LEFT)
|
|
return (
|
|
<div>
|
|
<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'>
|
|
<Link href={`/blogs/${item.slug}`}>
|
|
{item.title}
|
|
</Link>
|
|
</h4>
|
|
|
|
<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'>
|
|
{
|
|
data?.data?.mostVisitedBlogs?.map((item, index: number) => {
|
|
if (index !== 0 && index < 4) {
|
|
return (
|
|
<BlogItem key={item.id} item={item} />
|
|
)
|
|
}
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HeroSection |