fix: shoud not be empty variandId

src/app/home/components/Carousel.tsx

@@ -1,7 +1,8 @@
 'use client'
-import { FC, useState, useEffect } from 'react'
-import { Swiper, SwiperSlide } from 'swiper/react';
+import { FC, useState, useEffect, useRef } from 'react'
+import { Swiper, SwiperSlide, SwiperRef } from 'swiper/react';
 import { Pagination } from 'swiper/modules';
+import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useGetLanding } from '../hooks/useHomeData';
@@ -9,6 +10,9 @@ import { useGetLanding } from '../hooks/useHomeData';
 const Carousel: FC = () => {
     const { data } = useGetLanding()
     const [isMobile, setIsMobile] = useState(false)
+    const swiperRef = useRef<SwiperRef>(null)
+    const [isBeginning, setIsBeginning] = useState(true)
+    const [isEnd, setIsEnd] = useState(false)
 
     useEffect(() => {
         const checkIsMobile = () => {
@@ -30,7 +34,21 @@ const Carousel: FC = () => {
 
     return (
         <div className='relative' style={{ zIndex: 0 }}>
-            <Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5" style={{ zIndex: 0, position: 'relative' }}>
+            <Swiper
+                ref={swiperRef}
+                pagination={true}
+                modules={[Pagination]}
+                className="mySwiper pb-5"
+                style={{ zIndex: 0, position: 'relative' }}
+                onSlideChange={(swiper) => {
+                    setIsBeginning(swiper.isBeginning)
+                    setIsEnd(swiper.isEnd)
+                }}
+                onSwiper={(swiper) => {
+                    setIsBeginning(swiper.isBeginning)
+                    setIsEnd(swiper.isEnd)
+                }}
+            >
                 {sliders.map((slider) => (
                     <SwiperSlide key={slider._id}>
                         {slider.linkUrl ? (
@@ -55,6 +73,28 @@ const Carousel: FC = () => {
                     </SwiperSlide>
                 ))}
             </Swiper>
+
+            {/* Navigation buttons */}
+            <button
+                onClick={() => swiperRef.current?.swiper?.slidePrev()}
+                disabled={isBeginning}
+                className={`absolute left-2 top-1/2 -translate-y-1/2 z-10 rounded-full p-2 shadow-md transition-all duration-200 ${isBeginning
+                    ? 'bg-gray-100 cursor-not-allowed opacity-50'
+                    : 'bg-white/80 hover:bg-white cursor-pointer'
+                    }`}
+            >
+                <ArrowLeft2 size="20" color={isBeginning ? "#9CA3AF" : "#374151"} />
+            </button>
+            <button
+                onClick={() => swiperRef.current?.swiper?.slideNext()}
+                disabled={isEnd}
+                className={`absolute right-2 top-1/2 -translate-y-1/2 z-10 rounded-full p-2 shadow-md transition-all duration-200 ${isEnd
+                    ? 'bg-gray-100 cursor-not-allowed opacity-50'
+                    : 'bg-white/80 hover:bg-white cursor-pointer'
+                    }`}
+            >
+                <ArrowRight2 size="20" color={isEnd ? "#9CA3AF" : "#374151"} />
+            </button>
         </div>
     )
 }