@mongodb-js/mongodb-ui-components/build/preact/nav/js/nav-bottom/index.js

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

'use strict';

import {h} from 'preact';
import NavCTA from '../nav-cta';

const Link = props => {
  const subText = props.subText ? h(
    'small',
    null,
    props.subText
  ) : '';
  const content = props.bold || props.link ? h(
    'strong',
    null,
    props.text,
    subText
  ) : h(
    'span',
    null,
    props.text,
    subText
  );

  if (!props.href) {
    return h(
      'li',
      { className: props.className },
      content
    );
  }

  return h(
    'a',
    {
      style: props.style,
      href: props.href,
      className: props.className,
      target: props.newTab ? '_blank' : '_self' },
    h(
      'li',
      null,
      content
    )
  );
};

export default (props => h(
  'div',
  { className: 'm-nav-bottom' },
  props.sections.map((section, i) => {
    let cn = 'm-nav-bottom-list m-nav-flex-space';

    if (!props.isMobile && props.activeSection !== i) {
      cn += ' m-nav-bottom-list-inactive';
    }

    return h(
      'div',
      { key: i, className: cn },
      section.cta && h(NavCTA, {
        first: i === 0,
        header: section.cta.header,
        links: section.cta.links }),
      (props.midSections[i].link ? [[props.midSections[i]]] : []).concat(section.linkLists || []).map((links, i) => h(
        'ul',
        { key: i },
        links.map((item, j) => h(Link, {
          key: `${i}.${j}`,
          bold: item.bold,
          link: item.link,
          text: props.isMobile && item.mobileText ? item.mobileText : item.text,
          subText: item.subText,
          href: item.href,
          className: item.className,
          style: item.style,
          newTab: item.newTab }))
      ))
    );
  })
));