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

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { Box, Breadcrumbs, Link, Typography } from '@material-ui/core';
import { Flex } from '../Flex';

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

function HeaderWithBreadcrumbs({ breadcrumbs, rightSide, component }) {
  const RightSideComponent = typeof rightSide === 'string' ? Typography : Box;
  // Remove empty values
  const filtered = breadcrumbs?.filter(Boolean);
  return (
    <Flex
      width={1}
      height={56}
      alignCenter
      justifySpaceBetween
      directionRow
      bgcolor={colors.white}
      style={{
        borderBottom: `1px solid ${colors.gray5}`,
        position: 'sticky',
        top: 0,
        zIndex: 1250,
        flexShrink: 0,
      }}
    >
      <Box px={5}>
        <Breadcrumbs separator="/" aria-label="breadcrumb">
          {filtered?.map((crumb, index) =>
            index !== filtered.length - 1 ? (
              <Link component={component} href={crumb.href} key={`${crumb}-key`}>
                <Typography style={{ color: colors.gray3 }}>{crumb.label}</Typography>
              </Link>
            ) : (
              <Typography key={`${crumb}-key`} style={{ color: colors.gray2 }}>
                {crumb.label}
              </Typography>
            )
          )}
        </Breadcrumbs>
      </Box>
      <Box px={5}>
        <RightSideComponent data-testid="right-side-testid">{rightSide}</RightSideComponent>
      </Box>
    </Flex>
  );
}

HeaderWithBreadcrumbs.defaultProps = {
  breadcrumbs: [
    {
      href: '',
      label: '',
    },
  ],
  rightSide: '',
  component: null,
};

HeaderWithBreadcrumbs.propTypes = {
  breadcrumbs: PropTypes.arrayOf(
    PropTypes.shape({
      href: PropTypes.string,
      label: PropTypes.string,
    })
  ),
  rightSide: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
  component: PropTypes.element,
};

export { HeaderWithBreadcrumbs as Header };