Add Meshkee product catalog navigation and details

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-26 19:42:35 +03:30
parent 00126e5777
commit 34ce4f6925
13 changed files with 1499 additions and 97 deletions
@@ -0,0 +1,73 @@
+"use client";
+
+import { Maximize2, X } from "lucide-react";
+import { useState } from "react";
+
+export default function ProductGallery({
+  images,
+  title,
+}: {
+  images: string[];
+  title: string;
+}) {
+  const [activeImage, setActiveImage] = useState(images[0]);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+
+  return (
+    <>
+      <div className="product-gallery">
+        <button
+          className="product-gallery__main"
+          type="button"
+          onClick={() => setLightboxOpen(true)}
+          aria-label={`نمایش بزرگ تصویر ${title}`}
+        >
+          <img src={activeImage} alt={title} />
+          <span>
+            <Maximize2 size={18} />
+            مشاهده تصویر
+          </span>
+        </button>
+
+        {images.length > 1 && (
+          <div className="product-gallery__thumbs">
+            {images.map((image, index) => (
+              <button
+                className={image === activeImage ? "active" : ""}
+                type="button"
+                key={`${image}-${index}`}
+                onClick={() => setActiveImage(image)}
+                aria-label={`تصویر ${index + 1} از ${title}`}
+              >
+                <img src={image} alt={`${title}، تصویر ${index + 1}`} />
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {lightboxOpen && (
+        <div
+          className="product-lightbox"
+          role="dialog"
+          aria-modal="true"
+          aria-label={`گالری ${title}`}
+          onClick={() => setLightboxOpen(false)}
+        >
+          <button
+            type="button"
+            onClick={() => setLightboxOpen(false)}
+            aria-label="بستن گالری"
+          >
+            <X />
+          </button>
+          <img
+            src={activeImage}
+            alt={title}
+            onClick={(event) => event.stopPropagation()}
+          />
+        </div>
+      )}
+    </>
+  );
+}