base product single page

2026-07-21 11:25:41 +03:30
parent 6f22885ae9
commit ec39e4448d
9 changed files with 444 additions and 0 deletions
@@ -0,0 +1,27 @@
+import { Carousel, CarouselControls, CarouselSlide, CarouselTrack } from "@/app/components/Carousel";
+import ProductCard from "@/app/home/components/ProductCard";
+import { type FC } from "react";
+import { RELATED_PRODUCTS } from "../constants";
+
+const ProductRelated: FC = () => {
+  return (
+    <section className="mt-10 px-4 sm:mt-12 sm:px-8 lg:px-30">
+      <Carousel slidesPerView={{ base: 1.4, md: 3, lg: 5 }} gap={{ base: 12, md: 16, lg: 24 }}>
+        <div className="flex items-center justify-between gap-4">
+          <h2 className="text-lg font-bold text-[#0A1B2C] sm:text-xl">محصولات مرتبط</h2>
+          <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
+        </div>
+
+        <CarouselTrack className="mt-6 px-2 py-4 -mx-2 sm:mt-8">
+          {RELATED_PRODUCTS.map((title) => (
+            <CarouselSlide key={title}>
+              <ProductCard title={title} />
+            </CarouselSlide>
+          ))}
+        </CarouselTrack>
+      </Carousel>
+    </section>
+  );
+};
+
+export default ProductRelated;