first commit

2026-09-02 17:03:23 +03:30
commit 1bd131e9d8
91 changed files with 11211 additions and 0 deletions
@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+import type { Swiper as SwiperType } from "swiper";
+import { FreeMode } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import ProductCard from "./ui/ProductCard";
+import SectionHeader from "./ui/SectionHeader";
+import CarouselNav from "./ui/CarouselNav";
+import type { ProductCardData } from "@/lib/types";
+
+export default function ProductCarousel({
+  title,
+  desc,
+  href,
+  products,
+}: {
+  title: string;
+  desc?: string;
+  href: string;
+  products: ProductCardData[];
+}) {
+  const [swiper, setSwiper] = useState<SwiperType | null>(null);
+  if (products.length === 0) return null;
+
+  return (
+    <section className="boxed mt-10">
+      <SectionHeader title={title} desc={desc} href={href} nav={<CarouselNav swiper={swiper} />} />
+
+      <div className="relative">
+        <Swiper
+          modules={[FreeMode]}
+          dir="rtl"
+          freeMode
+          onSwiper={setSwiper}
+          slidesPerView={2.2}
+          spaceBetween={12}
+          breakpoints={{
+            480: { slidesPerView: 3.2 },
+            768: { slidesPerView: 4.2 },
+            1024: { slidesPerView: 6 },
+          }}
+        >
+          {products.map((product) => (
+            <SwiperSlide key={product.id} className="h-auto">
+              <ProductCard product={product} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+
+        <div className="mt-4 flex justify-center lg:hidden">
+          <CarouselNav swiper={swiper} />
+        </div>
+      </div>
+    </section>
+  );
+}