create banner

src/components/ui/Carousel.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { useRef } from "react";
+import { Children, useRef } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { FreeMode } from "swiper/modules";
+import type { Swiper as SwiperClass } from "swiper";
+import "swiper/css";
+import "swiper/css/free-mode";
 
 type CarouselProps = {
   children: React.ReactNode;
@@ -36,14 +41,7 @@ function ChevronRightIcon() {
 }
 
 export function Carousel({ children, ariaLabel }: CarouselProps) {
-  const trackRef = useRef<HTMLDivElement>(null);
-
-  const scroll = (direction: "prev" | "next") => {
-    const track = trackRef.current;
-    if (!track) return;
-    const amount = direction === "next" ? -280 : 280;
-    track.scrollBy({ left: amount, behavior: "smooth" });
-  };
+  const swiperRef = useRef<SwiperClass | null>(null);
 
   const btnClass =
     "absolute top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-white/40 bg-white/40 text-red shadow-sm backdrop-blur-md transition-colors hover:border-red/40 hover:bg-white/60 hover:text-red-dark";
@@ -52,7 +50,7 @@ export function Carousel({ children, ariaLabel }: CarouselProps) {
     <div className="relative">
       <button
         type="button"
-        onClick={() => scroll("prev")}
+        onClick={() => swiperRef.current?.slidePrev()}
         aria-label="قبلی"
         className={`${btnClass} right-1`}
       >
@@ -60,20 +58,30 @@ export function Carousel({ children, ariaLabel }: CarouselProps) {
       </button>
       <button
         type="button"
-        onClick={() => scroll("next")}
+        onClick={() => swiperRef.current?.slideNext()}
         aria-label="بعدی"
         className={`${btnClass} left-1`}
       >
         <ChevronLeftIcon />
       </button>
-      <div
-        ref={trackRef}
+      <Swiper
+        modules={[FreeMode]}
+        onSwiper={(swiper) => {
+          swiperRef.current = swiper;
+        }}
+        dir="rtl"
+        slidesPerView="auto"
+        spaceBetween={16}
+        freeMode={{ enabled: true, momentum: true, sticky: true }}
+        grabCursor
         role="region"
         aria-label={ariaLabel}
-        className="carousel-track flex items-stretch gap-4 overflow-x-auto scroll-smooth px-1 py-2"
+        className="!px-1 !py-2"
       >
-        {children}
-      </div>
+        {Children.map(children, (child) => (
+          <SwiperSlide style={{ width: "auto" }}>{child}</SwiperSlide>
+        ))}
+      </Swiper>
     </div>
   );
 }