@eureca/eureca-ui/src/components/Cards/track-info.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { Box, Card, Typography } from '@material-ui/core';

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

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

/* TODO: @tcp integrar ao locale global */
const locale = 'pt-br';
const numberFormatter = num => (num ? num.toLocaleString(locale) : 0);

const opacity = 0.8;
const trackCardStyles = {
  section: { color: colors.gray3, opacity },
  track: { opacity },
  numbers: { opacity },
  divider: { backgroundColor: colors.gray5 },
};

function Item({ name, value }) {
  return (
    <Flex justifyCenter>
      <Typography variant="body1" style={trackCardStyles.numbers}>
        {numberFormatter(value)}
      </Typography>
      <Box mt={2}>
        <Typography variant="body2" style={trackCardStyles.section}>
          {name}
        </Typography>
      </Box>
    </Flex>
  );
}

Item.propTypes = {
  name: PropTypes.string.isRequired,
  value: PropTypes.number.isRequired,
};

function TrackInfoCard({ track, opportunities, modules, solutions }) {
  return (
    <Card width={1} height={1}>
      <Box p={2}>
        <Flex directionRow alignCenter>
          <Typography variant="body2" style={trackCardStyles.track}>
            {`Trilha: ${track}`}
          </Typography>
          <Box component="div" mx={4} width="1px" height="80px" style={trackCardStyles.divider} />
          <Box mr={4}>
            <Item name="Vagas" value={opportunities} />
          </Box>
          <Box mr={4}>
            <Item name="Módulos" value={modules} />
          </Box>
          <Item name="Total de soluções" value={solutions} />
        </Flex>
      </Box>
    </Card>
  );
}

TrackInfoCard.propTypes = {
  track: '',
  opportunities: 0,
  modules: 0,
  solutions: 0,
};

TrackInfoCard.propTypes = {
  track: PropTypes.string.isRequired,
  opportunities: PropTypes.number.isRequired,
  modules: PropTypes.number.isRequired,
  solutions: PropTypes.number.isRequired,
};

export { TrackInfoCard };