@mongodb-js/mongodb-ui-components/src/footer/index.js

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

import {h} from 'preact'
import {LanguagePicker} from './language-picker'
import {Form} from './form'
import {sections} from './sections'
import {socialIcons, mongoLeaf} from './icons'

const Copyright = () => {
  return (
    <div class='w-max-600 fl fl-center-y'>
      {mongoLeaf}
      <small class='m-l-10'>
        © {new Date().getFullYear()} MongoDB, Inc.<br />
        Mongo, MongoDB, and the MongoDB leaf logo are registered trademarks of MongoDB, Inc.
      </small>
    </div>
  )
}

const List = ({title, items, maxWidth, className = '', hasIcons}) => (
  <div class={`w-${maxWidth} full-if-lt-900 m-20 ${className}`}>
    <small><strong>{title}</strong></small>
    <ul>{items.map(([href, text, isTarget]) =>
      <li class='m-v-10'>
        <a
          href={href}
          class='no-decor hover-underline'
          target={isTarget ? '_BLANK' : null}>
          <div class='fl fl-center-y'>
            {hasIcons ? socialIcons[text] : null}
            <small>{text}</small>
          </div>
        </a>
      </li>
    )}</ul>
  </div>
)

export const Footer = ({bg, color, languages, form}) => (
  <footer style={{
    backgroundColor: bg || '#1A1A1A',
    color: color || '#fff'
  }} class='p-v-30 w-full'>
    <div class='w-max-1200 w-full m-auto'>
      <div class='fl fl-justify-between fl-wrap'>
        {sections.map(List)}
      </div>

      <div
        class='m-auto'
        style={{borderBottom: '1px solid white', width: 'calc(100% - 40px)'}} />

      <div class='m-h-20 m-v-30 fl fl-wrap fl-justify-between'>
        <div>
          <div class='w-max-80'>
            <LanguagePicker
              visible={languages !== undefined && languages.length > 0}
              languages={languages} />
          </div>
          <span class='hide-lt-910'>
            <Copyright />
          </span>
        </div>
        {form !== undefined ? form : <Form />}
      </div>

      <div class='m-20 hide-gt-910'>
        <Copyright />
      </div>
    </div>
  </footer>
)