mirror of
https://github.com/hanzoai/bootnode.git
synced 2026-10-25 02:31:30 +00:00
zeekayandHanzo Dev
da98c0de75
74 files imported `lucide-react` directly, pinned ^1.26.0, while @luxfi/ui — which this console renders alongside — resolves 1.27. Two Lucide copies from two resolutions in one bundle is how a set stops being one set. Two more glyphs were not from any icon library at all: the node list drew its network in/out arrows as the literal characters "↓" and "↑", and the chain onboarding selector drew its tick as "✓". Those are font glyphs — they take the text metrics, not the icon box, so they sit on a different baseline and scale with the font, not `size-*`. One source now: `@luxfi/ui/icons`, Lucide as @hanzo/gui standardises on it and @luxfi/ui themes it. `lucide-react` is out of package.json, so per-surface drift is no longer expressible; @luxfi/ui comes in at 7.4.3, which is where `./icons` lives. The three text glyphs are ArrowDown / ArrowUp / Check. All 121 distinct icon names this console uses were checked against the 6014 symbols @luxfi/ui/icons exports before the rewrite — zero missing, with a negative control. `next build` is clean: 78 routes, Next 16.2.11 + Turbopack. The d3 chart roots (node-globe, node-map, globe-view, donut-chart, fleet-map) keep their <svg>: those are plots, not glyphs. The command menu's "↑↓" stays — it is a keyboard legend inside <kbd>, and it means the keys. Co-authored-by: Hanzo Dev <[email protected]>
111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect, useRef, ReactNode } from "react"
|
|
import { ChevronDown } from "@luxfi/ui/icons"
|
|
import { useMediaQuery } from "@/hooks/use-media-query"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type NavMenuProps = {
|
|
label: string
|
|
children: ReactNode | ((closeMenu: () => void) => ReactNode)
|
|
}
|
|
|
|
export function NavMenu({ label, children }: NavMenuProps) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const menuRef = useRef<HTMLDivElement>(null)
|
|
const isDesktop = useMediaQuery("(min-width: 1024px)")
|
|
const closeTimeoutRef = useRef<number | null>(null)
|
|
|
|
const handleMouseEnter = () => {
|
|
if (isDesktop) {
|
|
if (closeTimeoutRef.current) {
|
|
window.clearTimeout(closeTimeoutRef.current)
|
|
closeTimeoutRef.current = null
|
|
}
|
|
setIsOpen(true)
|
|
}
|
|
}
|
|
|
|
const handleMouseLeave = () => {
|
|
if (isDesktop) {
|
|
closeTimeoutRef.current = window.setTimeout(() => setIsOpen(false), 150)
|
|
}
|
|
}
|
|
|
|
const closeMenu = () => setIsOpen(false)
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (closeTimeoutRef.current) window.clearTimeout(closeTimeoutRef.current)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
|
setIsOpen(false)
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", handleClickOutside)
|
|
return () => document.removeEventListener("mousedown", handleClickOutside)
|
|
}, [])
|
|
|
|
const childrenWithProps =
|
|
typeof children === "function" ? children(closeMenu) : children
|
|
|
|
return (
|
|
<div
|
|
className="relative"
|
|
ref={menuRef}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
>
|
|
<button
|
|
onClick={() => !isDesktop && setIsOpen(!isOpen)}
|
|
className={cn(
|
|
"inline-flex items-center outline-none focus:outline-none transition-colors text-sm font-medium cursor-pointer",
|
|
isOpen
|
|
? "text-foreground"
|
|
: "text-muted-foreground hover:text-foreground"
|
|
)}
|
|
>
|
|
{label}
|
|
<ChevronDown
|
|
className={cn(
|
|
"ml-1 h-4 w-4 transition-transform duration-300",
|
|
isOpen && "rotate-180"
|
|
)}
|
|
/>
|
|
</button>
|
|
|
|
{isOpen && isDesktop && (
|
|
<div
|
|
className="fixed left-0 w-full backdrop-blur-md z-50 border-b shadow-2xl bg-background/95 border-border/50"
|
|
style={{ top: "4rem" }}
|
|
>
|
|
<div className="py-4">
|
|
<div className="w-full max-w-[1400px] mx-auto px-4 md:px-6 lg:px-10">
|
|
{childrenWithProps}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isOpen && !isDesktop && (
|
|
<div
|
|
className="fixed inset-0 left-0 right-0 backdrop-blur-md z-50 w-screen bg-background/95"
|
|
style={{ top: "4rem", height: "calc(100vh - 4rem)" }}
|
|
onClick={closeMenu}
|
|
>
|
|
<div
|
|
className="relative w-full h-full overflow-y-auto"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="px-4 sm:px-6 lg:px-8 py-6">{childrenWithProps}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|