feat: add MegaDropdown component for product/solution matrix navigation

2026-04-30 19:06:09 +08:00
parent 84422da250
commit 85fcb615d8
1 changed files with 69 additions and 0 deletions
@@ -0,0 +1,69 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { StaticLink } from '@/components/ui/static-link';
+import type { MegaDropdownItem } from '@/lib/constants';
+
+interface MegaDropdownProps {
+  label: string;
+  items: MegaDropdownItem[];
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+export function MegaDropdown({ label, items, isOpen, onToggle }: MegaDropdownProps) {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        if (isOpen) { onToggle(); }
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, onToggle]);
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        onClick={onToggle}
+        className="flex items-center gap-1 text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        {label}
+        <ChevronDown
+          className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.15 }}
+            className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-[480px] bg-white rounded-xl border border-[#E5E5E5] shadow-lg p-4 z-50"
+          >
+            <div className="grid grid-cols-2 gap-2">
+              {items.map((item) => (
+                <StaticLink
+                  key={item.id}
+                  href={item.href}
+                  className="block p-3 rounded-lg border-l-[3px] border-l-[#C41E3A] hover:bg-[#FFFBF5] transition-colors duration-200"
+                >
+                  <div className="text-sm font-semibold text-[#1C1C1C]">{item.title}</div>
+                  <div className="text-xs text-[#5C5C5C] mt-1">{item.description}</div>
+                </StaticLink>
+              ))}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}