Connect Meshkee backend, blog and shared account session

2026-09-05 19:41:56 +03:30
parent ee4b384238
commit de46b50e13
33 changed files with 803 additions and 11 deletions
@@ -0,0 +1,57 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { ChevronDown, ArrowUpLeft, FlaskConical, Microscope, Package, ShieldCheck } from 'lucide-react';
+import catalog from '../app/catalog.json';
+
+const groups = [
+  { title: 'اندیکاتورهای شیمیایی', icon: FlaskConical, start: 2, end: 15 },
+  { title: 'اندیکاتورهای بیولوژیکال', icon: Microscope, start: 0, end: 2 },
+  { title: 'بسته‌بندی استریل', icon: Package, start: 15, end: 26 },
+  { title: 'بهداشت و کنترل عفونت', icon: ShieldCheck, start: 26, end: 30 },
+];
+
+export default function ProductMenu() {
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function outside(event: PointerEvent) {
+      if (!root.current?.contains(event.target as Node)) setOpen(false);
+    }
+    function escape(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setOpen(false);
+        trigger.current?.focus();
+      }
+    }
+    document.addEventListener('pointerdown', outside);
+    document.addEventListener('keydown', escape);
+    return () => {
+      document.removeEventListener('pointerdown', outside);
+      document.removeEventListener('keydown', escape);
+    };
+  }, [open]);
+
+  return <div className="product-menu" ref={root} onBlur={event => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node)) setOpen(false);
+  }}>
+    <button ref={trigger} className="product-menu-trigger" aria-expanded={open} aria-controls="product-mega-menu" onClick={() => setOpen(!open)}>
+      محصولات <ChevronDown size={14} aria-hidden="true" />
+    </button>
+    <div id="product-mega-menu" className="mega-menu" hidden={!open}>
+      <div className="mega-heading"><div><strong>محصولات تخصصی ما</strong><span>استریلیزاسیون و کنترل عفونت</span></div><Link href="/#products" onClick={() => setOpen(false)}>همه محصولات <ArrowUpLeft size={17} /></Link></div>
+      <div className="mega-columns">{groups.map(group => <section key={group.title}>
+        <h2><group.icon size={21} aria-hidden="true" />{group.title}</h2>
+        <ul>{catalog.slice(group.start, group.end).map(product => <li key={product.source}>
+          <a href={product.downloaded ? product.url : '/tmas-bama'} target={product.downloaded ? '_blank' : undefined} rel={product.downloaded ? 'noreferrer' : undefined} onClick={() => setOpen(false)}>
+            <span>{product.title}</span><small>{product.downloaded ? 'PDF' : 'درخواست'}</small>
+          </a>
+        </li>)}</ul>
+      </section>)}</div>
+    </div>
+  </div>;
+}