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

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

'use strict';

import {h} from 'preact';
import SearchInput from './search';
import { contactIcon, downloadIcon } from '../nav-icons';

export default (props => {
  const includeSearch = props.includeSearch === undefined ? true : props.includeSearch;
  const downloadUrl = props.downloadUrl || '/download-center';
  const downloadJmpValue = props.downloadJmpValue || 'nav';
  const downloadJmp = downloadJmpValue === '' ? '' : `?jmp=${downloadJmpValue}`;

  return h(
    'div',
    { className: 'm-nav-top' },
    h(
      'ul',
      null,
      h(
        'div',
        { className: 'm-nav-top-links m-nav-flex-y m-nav-flex-nowrap' },
        props.sections.map(renderSection)
      ),
      h(
        'div',
        { className: 'm-nav-flex-y m-nav-flex-nowrap' },
        h(
          'a',
          { href: props.contactUrl || '/contact?jmp=nav' },
          h(
            'button',
            {
              className: 'm-nav-flex-xy m-nav-top-contact',
              style: !includeSearch ? { marginRight: '15px' } : null },
            contactIcon
          )
        ),
        includeSearch && h(SearchInput, { searchUrl: props.searchUrl || '/search?search=' }),
        h(
          'a',
          {
            id: 'mongodb-nav-download-btn',
            href: `${props.host}${downloadUrl}${downloadJmp}`,
            target: props.host === '' ? '_self' : '_blank' },
          h(
            'button',
            { className: 'm-nav-top-dl' },
            h(
              'span',
              null,
              'Get MongoDB'
            ),
            downloadIcon
          )
        )
      )
    )
  );
});

const renderSection = (section, i) => h(
  'a',
  {
    key: i,
    target: section.self ? '_self' : '_blank',
    href: section.href },
  h(
    'li',
    null,
    section.text
  )
);