@eureca/eureca-ui/src/components/Cards/user-opportunity.js

UI component library of Eureca's user and admin apps

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

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

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

const styles = {
  card: {
    cursor: 'pointer',
    border: `1px solid ${colors.gray5}`,
    borderBottom: 0,
    borderRadius: 4,
    backgroundColor: colors.white,
    boxShadow: shadows.clientEllipse,
  },
  cover: {
    borderRadius: '4px 4px 0 0',
    backgroundSize: 'cover',
    borderBottom: `2px solid ${colors.gray5}`,
  },
  divider: {
    borderBottom: `1px solid ${colors.gray3}`,
    opacity: 0.2,
  },
  dot: { borderRadius: '50%', backgroundColor: colors.gray4 },
};

const RemainingDays = ({ days, date, hasStarted, track = '' }) => {
  const when = days < 0 ? 'past' : days > 0 ? 'future' : 'today';
  const timeTranslator = hasStarted
    ? {
        past: 'Encerrado',
        today: 'Encerra hoje',
        future: `${days > 1 ? 'Faltam' : 'Falta'} ${days} ${
          days > 1 ? 'dias' : 'dia'
        } para encerrar a Trilha ${track}`,
      }
    : {
        past: 'Inscrições encerradas',
        today: 'Último dia para se inscrever',
        future: `Inscrições até ${format(date, 'dd/MM/yyyy')}`,
      };

  return (
    <Flex alignFlexStart>
      <Typography variant="body2" style={{ fontWeight: 500 }}>
        {timeTranslator[when]}
      </Typography>
    </Flex>
  );
};

RemainingDays.propTypes = {
  days: PropTypes.number.isRequired,
  date: PropTypes.object.isRequired,
  hasStarted: PropTypes.bool.isRequired,
  track: PropTypes.string,
};

const ProgressBar = ({ progress }) => (
  <Box
    width="100%"
    height={8}
    style={{
      background: `linear-gradient(90deg, ${colors.green1} ${progress}%, ${colors.gray4} ${progress}%)`,
      borderRadius: '0 0 4px 4px',
    }}
  />
);

ProgressBar.propTypes = {
  progress: PropTypes.number,
};

function OpportunityCardUser({
  id,
  title,
  organization,
  type,
  date,
  progress,
  currentTrack,
  image,
  onClick,
  ...props
}) {
  const theme = useTheme();
  const remainingDays = differenceInDays(date, new Date());
  const isOutdated = remainingDays < 0;

  function handleClickCard() {
    if (onClick) {
      onClick();
    }
  }

  return (
    <Card
      style={styles.card}
      onClick={handleClickCard}
      onKeyPress={handleClickCard}
      role="button"
      tabIndex="0"
      {...props}
    >
      <Box
        height={theme.spacing(17)}
        style={{
          background: isOutdated
            ? `linear-gradient(0deg, rgba(89, 89, 89, 0.8), rgba(89, 89, 89, 0.8)), url(${image}) no-repeat`
            : `url(${image}) no-repeat`,
          ...styles.cover,
        }}
      />
      <Box py={1.5} px={2}>
        <Flex directionRow justifySpaceBetween alignCenter>
          <Box>
            <Typography variant="body1" style={{ lineHeight: 2 }}>
              {title}
            </Typography>
            <Flex directionRow alignCenter>
              <Typography variant="body1" style={{ color: colors.gray3 }}>
                {organization}
              </Typography>
              <Box width={4} height={4} mx={1} style={styles.dot} />
              <Typography variant="body1" style={{ color: colors.gray3 }}>
                {type}
              </Typography>
            </Flex>
          </Box>
        </Flex>
      </Box>
      <div style={styles.divider} />
      <Box px={2} py={1}>
        <RemainingDays
          track={currentTrack}
          days={remainingDays}
          date={date}
          hasStarted={Boolean(progress)}
        />
      </Box>
      {progress !== 0 && <ProgressBar progress={progress} />}
    </Card>
  );
}

OpportunityCardUser.propTypes = {
  id: null,
  title: '',
  organization: '',
  type: '',
  date: new Date(),
  image: '',
  progress: 0,
  currentTrack: '',
  onClick: () => {},
};

OpportunityCardUser.propTypes = {
  id: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  organization: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  date: PropTypes.object,
  image: PropTypes.string.isRequired,
  progress: PropTypes.number,
  currentTrack: PropTypes.string,
  onClick: PropTypes.func,
};

export { OpportunityCardUser };