fix page

2026-06-15 19:00:31 -04:00
1 parent a7091858e0
commit ba5c0aba50
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import type { MegaMenuPayload } from '../store/menuStore';
+import { useTranslation } from 'react-i18next';
+
+interface DesktopMegaMenuProps {
+  items: MegaMenuPayload[];
+}
+
+const getLocalizedText = (textObj: Record<string, string> | string | undefined, lang: string) => {
+  if (typeof textObj === 'string') return textObj;
+  if (!textObj) return '';
+  return textObj[lang] || textObj['en'] || Object.values(textObj)[0] || '';
+};
+
+export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
+  const [openId, setOpenId] = useState<string | null>(null);
+  const { i18n } = useTranslation();
+  const lang = i18n.language ? i18n.language.substring(0, 2) : 'en';
+
+  return (
+    <div className="hidden md:flex space-x-7 text-sm font-medium tracking-wide uppercase">
+      {items.map((item) => (
+        <div 
+          key={item.id} 
+          className="relative group"
+          onMouseEnter={() => setOpenId(item.id)}
+          onMouseLeave={() => setOpenId(null)}
+        >
+          <Link 
+            to={item.url || '#'} 
+            className="flex items-center gap-1 text-spa-stone hover:text-spa-forest transition-colors py-2"
+          >
+            {getLocalizedText(item.label, lang)}
+            {item.columns && item.columns.length > 0 && (
+              <svg className="w-3 h-3 opacity-50 transition-transform duration-300 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            )}
+          </Link>
+          
+          {item.columns && item.columns.length > 0 && openId === item.id && (
+            <div className="absolute top-full left-1/2 -translate-x-1/2 pt-4 w-auto min-w-[320px] opacity-100 pointer-events-auto transition-all duration-300 z-50">
+              <div className="bg-white/95 backdrop-blur-xl border border-black/5 rounded-xl overflow-hidden shadow-2xl p-5 flex gap-8">
+                {item.columns.map((col, idx) => (
+                  <div key={idx} className="flex-1 min-w-[140px]">
+                    <h4 className="text-[10px] uppercase tracking-widest text-spa-stone/60 font-semibold mb-3">
+                      {getLocalizedText(col.title, lang)}
+                    </h4>
+                    <ul className="space-y-1">
+                      {col.links.map((link, lIdx) => (
+                        <li key={lIdx}>
+                          <Link 
+                            to={link.url || '#'}
+                            className="text-xs uppercase tracking-widest text-spa-stone hover:text-spa-forest hover:bg-spa-sage px-3 py-2 rounded-lg block transition-colors"
+                          >
+                            {getLocalizedText(link.label, lang)}
+                          </Link>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}