api call ssr landing + latest product + ...

src/app/home/components/Carousel.tsx

@@ -2,21 +2,35 @@
 import { FC } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination } from 'swiper/modules';
+import Image from 'next/image';
+import { useGetLanding } from '../hooks/useHomeData';
 
 const Carousel: FC = () => {
+    const { data } = useGetLanding()
+
+    if (!data?.results?.sliders?.desktop || data.results.sliders.desktop.length === 0) {
+        return (
+            <div className='mt-5 h-[400px] bg-gray-200 rounded-lg flex items-center justify-center'>
+                <p className="text-gray-500">اسلایدری موجود نیست</p>
+            </div>
+        );
+    }
+
     return (
         <div className='mt-5 relative' style={{ zIndex: 0 }}>
             <Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5" style={{ zIndex: 0, position: 'relative' }}>
-                <SwiperSlide>
-                    <div className='h-[400px] bg-red-50'>
-                        1
-                    </div>
-                </SwiperSlide>
-                <SwiperSlide>
-                    <div className='h-[400px] bg-red-50'>
-                        1
-                    </div>
-                </SwiperSlide>
+                {data.results.sliders.desktop.map((slider) => (
+                    <SwiperSlide key={slider._id}>
+                        <div className='h-[400px] relative'>
+                            <Image
+                                src={slider.imageUrl}
+                                alt={slider.altText}
+                                fill
+                                className="object-cover rounded-lg"
+                            />
+                        </div>
+                    </SwiperSlide>
+                ))}
             </Swiper>
         </div>
     )