bug fix

src/widgets/welcome/ui/index.tsx

@@ -5,6 +5,7 @@ import { category_api } from '@/shared/config/api/category/api';
 import { product_api } from '@/shared/config/api/product/api';
 import { BASE_URL } from '@/shared/config/api/URLs';
 import { Link } from '@/shared/config/i18n/navigation';
+import { cn } from '@/shared/lib/utils';
 import { AspectRatio } from '@/shared/ui/aspect-ratio';
 import { Button } from '@/shared/ui/button';
 import { Card } from '@/shared/ui/card';
@@ -20,12 +21,15 @@ import { ProductCard } from '@/widgets/categories/ui/product-card';
 import { useQuery } from '@tanstack/react-query';
 import { AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import 'swiper/css';
 import { banner_api } from '../lib/api';
 
 const Welcome = () => {
   const [api, setApi] = useState<CarouselApi>();
+  const [apiPro, setApiPro] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
   const [apiCat, setApiCat] = useState<CarouselApi>();
 
   const { data, isLoading, isError } = useQuery({
@@ -36,6 +40,36 @@ const Welcome = () => {
     },
   });
 
+  useEffect(() => {
+    if (!apiPro) return;
+
+    const updateButtons = () => {
+      setCanScrollPrev(apiPro.canScrollPrev());
+      setCanScrollNext(apiPro.canScrollNext());
+    };
+
+    updateButtons();
+    apiPro.on('select', updateButtons);
+    apiPro.on('reInit', updateButtons);
+
+    return () => {
+      apiPro.off('select', updateButtons);
+      apiPro.off('reInit', updateButtons);
+    };
+  }, [apiPro]);
+
+  const scrollPrevPro = () => {
+    if (apiPro) {
+      apiPro?.scrollPrev();
+    }
+  };
+
+  const scrollNextPro = () => {
+    if (apiPro) {
+      apiPro?.scrollNext();
+    }
+  };
+
   const { data: category } = useQuery({
     queryKey: ['category_list'],
     queryFn: () => category_api.getCategory({ page: 1, page_size: 99 }),
@@ -182,7 +216,12 @@ const Welcome = () => {
         </Carousel>
       </div>
       <section className="relative custom-container mt-5 justify-center items-center border-b border-slate-200">
-        <Carousel className="w-full mt-2" setApi={setApi}>
+        <div className="flex items-center justify-between pb-3">
+          <div className="flex items-center gap-2 group cursor-pointer">
+            <div className="p-1.5 bg-slate-100 rounded-full group-hover:bg-blue-100 transition-all"></div>
+          </div>
+        </div>
+        <Carousel className="w-full mt-5" setApi={setApiPro}>
           <CarouselContent className="pr-[12%] sm:pr-0">
             {productLoading &&
               Array.from({ length: 6 }).map((__, index) => (
@@ -211,7 +250,35 @@ const Welcome = () => {
                   </CarouselItem>
                 ))}
           </CarouselContent>
-        </Carousel>
+        </Carousel>{' '}
+        <Button
+          onClick={scrollNextPro}
+          className={cn(
+            'absolute top-0 right-4 max-lg:hidden text-white cursor-pointer',
+            canScrollNext
+              ? 'bg-green-600 hover:bg-green-600/70'
+              : 'bg-green-600/50 cursor-not-allowed',
+          )}
+          disabled={!canScrollNext}
+          aria-label="next images"
+          size="icon"
+        >
+          <ChevronRight className="size-6" />
+        </Button>
+        <Button
+          onClick={scrollPrevPro}
+          className={cn(
+            'absolute top-0 right-16 max-lg:hidden text-white cursor-pointer',
+            canScrollPrev
+              ? 'bg-green-600 hover:bg-green-600/70'
+              : 'bg-green-600/50 cursor-not-allowed',
+          )}
+          aria-label="prev images"
+          disabled={!canScrollPrev}
+          size="icon"
+        >
+          <ChevronLeft className="size-6" />
+        </Button>
       </section>
 
       {category &&