@mongodb-js/mongodb-ui-components/src/nav/dropdown.js

A collection of frequently used functional UI components found on mongodb properties

import {h} from 'preact'

function onMouseEnter (e) {
  e.currentTarget.children[0].style.color = '#13AA52'
}

function onMouseLeave (e) {
  e.currentTarget.children[0].style.color = ''
}

export function Dropdown ({isOpen, isActive, items}) {
  return (
    <div
      style={{
        opacity: isActive ? 1 : 0,
        transition: '100ms',
        visibility: isActive ? '' : 'hidden',
        pointerEvents: isActive ? '' : 'none'
      }}
      class='absolute top left w-full p-25'>
      {items.map((item, i, {length}) =>
        <div class={i === length - 1 ? '' : 'm-b-20'}>
          <a
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}
            class='reset' href={item.href}>
            <small style={{fontSize: '12px', transition: '200ms'}} class='disp-block'>
              <strong>{item.title}</strong>
            </small>
            <small style={{fontSize: '12px'}} class='disp-block'>
              {item.text}
            </small>
          </a>
        </div>
      )}
    </div>
  )
}