Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-21 16:04:31 +03:30
parent cfa21cbee9
commit 8e14748b48
29 changed files with 1460 additions and 244 deletions
@@ -0,0 +1,71 @@
+"use client";
+
+import { useRef } from "react";
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Container } from "@/components/Container";
+import { ProductCard } from "@/components/ui/ProductCard";
+import type { Product } from "@/lib/data";
+
+type Props = {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  href?: string;
+  products: Product[];
+};
+
+export function ProductCarousel({ id, title, subtitle, href = "/products", products }: Props) {
+  const scroller = useRef<HTMLDivElement>(null);
+
+  const scrollBy = (dir: number) => {
+    scroller.current?.scrollBy({ left: dir * -280, behavior: "smooth" });
+  };
+
+  if (!products.length) return null;
+
+  return (
+    <section id={id} className="py-10">
+      <Container>
+        <div className="mb-5 flex items-end justify-between gap-3">
+          <div>
+            <div className="flex items-center gap-3">
+              <span className="h-[3px] w-8 bg-brand" />
+              <p className="section-kicker">Parts</p>
+            </div>
+            <h2 className="mt-3 text-[22px] font-extrabold sm:text-[28px]">{title}</h2>
+            {subtitle ? <p className="mt-1 text-[13px] text-muted">{subtitle}</p> : null}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => scrollBy(-1)}
+              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+              aria-label="قبلی"
+            >
+              <ChevronRight className="size-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => scrollBy(1)}
+              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+              aria-label="بعدی"
+            >
+              <ChevronLeft className="size-4" />
+            </button>
+            <Link href={href} className="hidden rounded-xl bg-ink px-5 py-2.5 text-[13px] text-white hover:bg-brand sm:inline-flex">
+              مشاهده همه
+            </Link>
+          </div>
+        </div>
+        <div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-4 overflow-x-auto pb-1">
+          {products.map((product) => (
+            <div key={product.id} className="w-[210px] shrink-0 snap-start sm:w-[230px]">
+              <ProductCard product={product} />
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}