blog

src/app/blogs/components/HeroSection.tsx

@@ -1,34 +1,53 @@
 import BlogItem from '@/components/BlogItem'
 import Image from 'next/image'
 import { FC } from 'react'
+import { useGetBlogCombined } from '../hooks/useBlogsData'
 
 const HeroSection: FC = () => {
+
+    const { data } = useGetBlogCombined()
+
     return (
         <div>
-            <div className='relative rounded-4xl overflow-hidden'>
-                <Image
-                    src={'/images/banner.webp'}
-                    alt='banner'
-                    width={1920}
-                    height={1080}
-                    className='w-full rounded-4xl object-cover xl:mt-14 mt-8 xl:min-h-[210px] min-h-[350px]'
-                />
+            {
+                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]'
+                                />
 
-                <div className='absolute bottom-0 h-[140px] modalGlass3 w-full p-6 text-white'>
-                    <h4 className='font-bold xl:text-base text-sm'>
-                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
-                    </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>
+
+                                    <p className="text-xs xl:text-sm mt-4 leading-7 truncate xl:text-clip xl:whitespace-normal">
+                                        {item.previewContent}
+                                    </p>
+                                </div>
+                            </div>
+                        )
+                    }
+                })
+            }
 
-                    <p className="text-xs xl:text-sm mt-4 leading-7 truncate xl:text-clip xl:whitespace-normal">
-                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...
-                    </p>
-                </div>
-            </div>
 
             <div className='flex xl:flex-row flex-col gap-8 mt-10'>
-                <BlogItem />
-                <BlogItem />
-                <BlogItem />
+                {
+                    data?.data?.mostVisitedBlogs?.map((item, index: number) => {
+                        if (index !== 0) {
+                            return (
+                                <BlogItem key={item.id} item={item} />
+                            )
+                        }
+                    })
+                }
             </div>
         </div>
     )