import React from 'react'
/** Hover-and-click dropdown, matching the nav's Log in / Try Hanzo menus. */
export function DropdownMenu({ align = 'right', hover = false, trigger, style, children }) {
const [open, setOpen] = React.useState(false)
const ref = React.useRef(null)
React.useEffect(() => {
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
document.addEventListener('mousedown', onDoc)
return () => document.removeEventListener('mousedown', onDoc)
}, [])
return (
setOpen(true) : undefined}
onMouseLeave={hover ? () => setOpen(false) : undefined}
style={{position:'relative',display:'inline-flex',...style}}
>
setOpen((v) => !v)} style={{display:'inline-flex'}}>{trigger}
{open && (
)}
)
}
export function DropdownMenuItem({ desc, style, children, ...rest }) {
const [hover, setHover] = React.useState(false)
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{display:'block',padding: desc ? '10px 12px' : '8px 12px',borderRadius:'var(--radius-sm)',background: hover ? 'var(--glass-strong)' : 'transparent',cursor:'pointer',textDecoration:'none',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
{...rest}
>
{/* --text-primary / --text-tertiary, not --neutral-100 / --neutral-500.
The neutral ladder is a PALETTE: it does not invert, so a menu item
painted from it rendered #f5f5f5 text on the light theme's #ffffff
popover — the item did not change colour, it stopped being legible. */}
{children}
{desc && {desc}}
)
}
export function DropdownMenuLabel({ style, children, ...rest }) {
return {children}
}
export function DropdownMenuSeparator({ style }) {
return
}