banner

src/widgets/welcome/ui/index.tsx

@@ -1,30 +1,75 @@
 'use client';
 
-import Banner from '@/assets/banner.webp';
+import Banner from '@/assets/gemma-c-stpjHJGqZyw-unsplash.jpg';
+import Banner_Two from '@/assets/photo-1506617420156-8e4536971650.jpg';
+import Banner_Three from '@/assets/pngtree-supermarket-aisle-with-empty-shopping-cart-at-grocery-store-retail-business-image_15646095.jpg';
 import { AspectRatio } from '@/shared/ui/aspect-ratio';
+import { Button } from '@/shared/ui/button';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from '@/shared/ui/carousel';
 import useCategoryActive from '@/widgets/navbar/lib/openCategory';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Image from 'next/image';
+import { useState } from 'react';
 import 'swiper/css';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { categoryList } from '../lib/data';
 
+const banner = [Banner, Banner_Two, Banner_Three];
+
 const Welcome = () => {
   const { setActive, setOpenToolbar } = useCategoryActive();
+  const [api, setApi] = useState<CarouselApi>();
+
+  const scrollPrev = () => {
+    api?.scrollPrev();
+  };
+
+  const scrollNext = () => {
+    api?.scrollNext();
+  };
 
   return (
     <div className="custom-container">
-      {/* Banner */}
-      <AspectRatio ratio={16 / 6} className="!p-0">
-        <div className="relative w-full h-full">
-          <Image
-            src={Banner || '/placeholder.svg'}
-            alt="Banner"
-            fill
-            className="rounded-2xl object-cover shadow-lg border border-slate-200"
-            priority
-          />
-        </div>
-      </AspectRatio>
+      <Carousel className="w-full" setApi={setApi}>
+        <CarouselContent className="!pr-[8%] sm:pr-0">
+          {banner.map((e, index) => (
+            <CarouselItem key={index} className="relative">
+              <AspectRatio ratio={16 / 8}>
+                <div className="relative w-full h-full">
+                  <Image
+                    src={e || '/placeholder.svg'}
+                    alt="Banner"
+                    fill
+                    className="rounded-2xl object-cover shadow-lg border border-slate-200"
+                    priority
+                  />
+                </div>
+              </AspectRatio>
+              <Button
+                onClick={scrollNext}
+                className="absolute bottom-5 right-5"
+                variant={'secondary'}
+                size={'icon'}
+              >
+                <ChevronRight className="size-6" />
+              </Button>
+              <Button
+                onClick={scrollPrev}
+                className="absolute bottom-5 right-16"
+                variant={'secondary'}
+                size={'icon'}
+              >
+                <ChevronLeft className="size-6" />
+              </Button>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
 
       {/* Category Slider */}
       <div className="mx-auto mt-5 max-lg:hidden">