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,86 @@
+"use client";
+
+import { useState } from "react";
+import { X } from "lucide-react";
+import { Placeholder } from "@/components/Placeholder";
+
+export function ProductGallery({ images, alt }: { images: string[]; alt: string }) {
+  const gallery = images.length ? images : ["/placeholders/product.svg"];
+  const [active, setActive] = useState(0);
+  const [lightbox, setLightbox] = useState(false);
+  const [origin, setOrigin] = useState("50% 50%");
+  const [zoomed, setZoomed] = useState(false);
+  const current = gallery[active] ?? gallery[0];
+
+  return (
+    <>
+      <div>
+        <button
+          type="button"
+          className="relative block w-full overflow-hidden rounded-2xl bg-paper"
+          onClick={() => setLightbox(true)}
+          onMouseEnter={() => setZoomed(true)}
+          onMouseLeave={() => {
+            setZoomed(false);
+            setOrigin("50% 50%");
+          }}
+          onMouseMove={(event) => {
+            const box = event.currentTarget.getBoundingClientRect();
+            const x = ((event.clientX - box.left) / box.width) * 100;
+            const y = ((event.clientY - box.top) / box.height) * 100;
+            setOrigin(`${x}% ${y}%`);
+          }}
+        >
+          <Placeholder
+            src={current}
+            fallbackSrc="/placeholders/product.svg"
+            alt={alt}
+            className="aspect-square w-full object-contain transition-transform duration-150"
+          />
+          <span
+            className="pointer-events-none absolute inset-0 bg-contain bg-center bg-no-repeat"
+            style={{
+              backgroundImage: `url(${current})`,
+              transform: zoomed ? "scale(1.85)" : "scale(1)",
+              transformOrigin: origin,
+              opacity: zoomed ? 1 : 0,
+            }}
+          />
+        </button>
+        {gallery.length > 1 ? (
+          <div className="mt-3 flex gap-2 overflow-x-auto">
+            {gallery.map((image, index) => (
+              <button
+                key={`${image}-${index}`}
+                type="button"
+                onClick={() => setActive(index)}
+                className={`size-16 shrink-0 overflow-hidden rounded-xl border ${index === active ? "border-brand" : "border-line"}`}
+              >
+                <Placeholder src={image} className="size-full object-contain" />
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      {lightbox ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/80 p-4" onClick={() => setLightbox(false)}>
+          <button
+            type="button"
+            className="absolute top-4 left-4 grid size-10 place-items-center rounded-full bg-white text-ink"
+            aria-label="بستن"
+          >
+            <X className="size-5" />
+          </button>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={current}
+            alt={alt}
+            className="max-h-[90vh] max-w-full rounded-2xl object-contain"
+            onClick={(event) => event.stopPropagation()}
+          />
+        </div>
+      ) : null}
+    </>
+  );
+}