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

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { format } from 'date-fns';

import { Typography, Box, useTheme } from '@material-ui/core';

import { IconContext } from 'react-icons';

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

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

import { useWindowSize } from '../../hooks/useWindowSizeSSR';

const chooseColor = {
  open: colors.color4,
  closed: colors.gray2,
};

const chooseMessage = {
  open: 'Aberta até',
  closed: 'Encerrada',
};

const styles = muiTheme => ({
  text: {
    color: colors.gray3,
    textTransform: 'uppercase',
    letterSpacing: '1px',
  },
  divider: {
    width: '100%',
    height: '1px',
    backgroundColor: colors.gray5,
  },
  chips: {
    fontSize: '.75rem',
    fontWeight: muiTheme.typography.fontWeightRegular,
    lineHeight: '1.125rem',
    color: colors.white,
    height: muiTheme.spacing(3),
  },
  score: {
    textTransform: 'uppercase',
    fontSize: '0.75rem',
    fontWeight: muiTheme.typography.fontWeightMedium,
    color: colors.gray3,
  },
});

function TrackContextHeader({ title, icon, status, endDate, score, totalScore, results }) {
  const size = useWindowSize();
  const muiTheme = useTheme();
  const style = styles(muiTheme);
  const isMobile = size?.width < muiTheme.breakpoints.values.md;

  const chipsLabel = `${chooseMessage[status]} ${
    status === 'open' ? format(endDate, 'dd/MM') : ''
  }`;

  return (
    <Flex directionRow={!isMobile} justifyCenter={isMobile} alignCenter>
      <Flex directionRow justifyCenter alignCenter>
        <IconContext.Provider value={{ color: colors.green1, size: 32 }}>
          {icon}
        </IconContext.Provider>
        <Box mx={2}>
          <Typography style={style.text}>{`Fase ${title}`}</Typography>
        </Box>
      </Flex>

      {isMobile ? (
        <Box clone mt={2} mb={4}>
          <div id="divider" style={style.divider} />
        </Box>
      ) : null}
      {!results ? (
        <Flex directionRow justifySpaceBetween alignCenter width={1} style={{ flex: 1 }}>
          <Chips
            label={chipsLabel}
            style={{ ...style.chips, backgroundColor: chooseColor[status] }}
          />
          <Typography style={style.score}>
            NOTA:
            <span
              style={{
                fontWeight: muiTheme.typography.fontWeightRegular,
                textTransform: 'capitalize',
              }}
            >
              {score ? ` ${score} / ${totalScore}` : 'Aguardando'}
            </span>
          </Typography>
        </Flex>
      ) : null}
    </Flex>
  );
}

TrackContextHeader.propTypes = {
  title: PropTypes.string,
  icon: PropTypes.object,
  status: PropTypes.string,
  endDate: PropTypes.object,
  score: PropTypes.number,
  totalScore: PropTypes.number,
  results: PropTypes.bool,
};

TrackContextHeader.defaultProps = {
  title: '',
  icon: null,
  status: 'open',
  endDate: new Date(),
  score: 0,
  totalScore: 0,
  results: false,
};

export { TrackContextHeader };