@eureca/eureca-ui/src/components/TopBar/index.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { FiMenu, FiFilter } from 'react-icons/fi';

import { colors } from '../../theme/colors';

import { Flex } from '../Flex';
import { Logo } from '../Logo';

const TopBarManager = ({ onClickLeft, onClickRight, onClickLogo }) => {
  return (
    <Flex
      px={2}
      directionRow
      alignCenter
      justifySpaceBetween
      height="56px"
      boxSizing="border-box"
      bgcolor={colors.gray2}
    >
      <Flex directionRow alignCenter>
        {onClickLeft && (
          <Flex
            role="button"
            aria-label="Menu"
            mr="32px"
            alignCenter
            justifyCenter
            cursorPointer
            width="24px"
            height="24px"
            onClick={onClickLeft}
          >
            <FiMenu size="20px" color={colors.white} />
          </Flex>
        )}
        <Logo
          role="button"
          aria-label="Logo Eureca"
          width="86px"
          height="15px"
          fill={colors.green1}
          onClick={onClickLogo}
          style={{ cursor: 'pointer' }}
        />
      </Flex>
      {onClickRight && (
        <Flex
          role="button"
          aria-label="Filter"
          alignCenter
          justifyCenter
          cursorPointer
          width="24px"
          height="24px"
          onClick={onClickRight}
        >
          <FiFilter size="24px" color={colors.white} />
        </Flex>
      )}
    </Flex>
  );
};

const TopBarUser = ({ onClickLeft, onClickRight, onClickLogo }) => {
  return (
    <Flex
      px={2}
      pb={2}
      directionRow
      alignFlexEnd
      height="76px"
      boxSizing="border-box"
      bgcolor={colors.white}
    >
      <Flex directionRow alignCenter justifySpaceBetween width="100%">
        {onClickLeft && (
          <Flex
            role="button"
            aria-label="Menu"
            mr="32px"
            alignCenter
            justifyCenter
            cursorPointer
            width="24px"
            height="24px"
            onClick={onClickLeft}
          >
            <FiMenu size="20px" color={colors.gray2} />
          </Flex>
        )}
        <Logo
          role="button"
          aria-label="Logo Eureca"
          width="86px"
          height="15px"
          fill={colors.green1}
          onClick={onClickLogo}
          style={{ cursor: 'pointer' }}
        />
        {onClickRight && (
          <Flex
            role="button"
            aria-label="Filter"
            alignCenter
            justifyCenter
            cursorPointer
            width="24px"
            height="24px"
            onClick={onClickRight}
          >
            <FiFilter size="24px" color={colors.gray2} />
          </Flex>
        )}
      </Flex>
    </Flex>
  );
};

const TopBar = ({ type, onClickLeft, onClickRight, onClickLogo }) => {
  return type === 'manager' ? (
    <TopBarManager
      onClickLeft={onClickLeft}
      onClickRight={onClickRight}
      onClickLogo={onClickLogo}
    />
  ) : (
    <TopBarUser onClickLeft={onClickLeft} onClickRight={onClickRight} onClickLogo={onClickLogo} />
  );
};

TopBar.prototypes = {
  type: PropTypes.oneOf(['manager', 'user']),
  onClickLeft: PropTypes.func,
  onClickLogo: PropTypes.func,
  onClickRight: PropTypes.func,
};

TopBar.defaultProps = {
  type: 'manager',
  onClickLeft: null,
  onClickLogo: () => {},
  onClickRight: null,
};

export { TopBar };