58 lines
2.7 KiB
TypeScript
58 lines
2.7 KiB
TypeScript
'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 : '/contact-us'} 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>;
|
|
}
|