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

UI component library of Eureca's user and admin apps

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

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

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

function OpportunityTimer({ title, date, image, progress = 0, ...props }) {
  const dayPlusOne = addDays(date, 1);
  const remainingDays = differenceInDays(dayPlusOne, new Date());

  return (
    <Grid
      container
      style={{
        width: '100%',
        height: '100%',
        border: `1px solid ${colors.gray5}`,
        boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.05)',
        borderRadius: 4,
        backgroundColor: 'white',
      }}
      {...props}
    >
      <Grid item xs={12} md={5}>
        <div
          data-testid="cover-image-testid"
          style={{
            height: 104,
            background: `url(${image}) no-repeat`,
            backgroundSize: 'cover',
          }}
        />
      </Grid>
      <Grid item xs={12} md={7}>
        <Flex ml={3} py={2}>
          <Typography variant="h5">{title}</Typography>
          <Box mt={4}>
            <Typography variant="body2">
              {remainingDays > 0
                ? remainingDays > 1
                  ? `Faltam ${remainingDays} dias para encerrar`
                  : `Falta ${remainingDays} dia para encerrar`
                : 'Encerra hoje'}
            </Typography>
          </Box>
        </Flex>
      </Grid>
      <Grid
        item
        xs={12}
        style={{
          height: 8,
          background: `linear-gradient(90deg, ${colors.green1} ${progress}%, ${colors.gray4} ${progress}%)`,
          borderRadius: `0 0 4px 4px`,
        }}
      />
    </Grid>
  );
}

OpportunityTimer.propTypes = {
  title: PropTypes.string.isRequired,
  date: PropTypes.object.isRequired,
  image: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

export { OpportunityTimer };