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

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { Box, Card, CardActionArea, CardContent, Typography, CardActions } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

import { IconContext } from 'react-icons';
import { FiThumbsUp, FiUserCheck, FiCrosshair } from 'react-icons/fi';

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

import PlaceholderImage from '../../assets/images/opportunity-card-cover.png';
import { EllipsisTrigger, IconAndLabelMenuList } from '../Menu';
import { colors } from '../../theme/colors';

const Divider = styled(Box)`
  width: 100%;
  height: 2px;
  background-color: ${colors.gray3};
  opacity: 0.2;
`;

const ImageComponent = styled.div`
  ${props => css`
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)),
      url(${props.image});
    height: 136px;
  `}
`;

const useStyles = makeStyles({
  root: {
    boxShadow: 'none',
  },
});

const cardIcons = {
  like: <FiThumbsUp />,
  candidates: <FiUserCheck />,
  jobs: <FiCrosshair />,
};

function OpportunityCard({
  id,
  title,
  subtitle,
  image,
  statusColor,
  menuOptions,
  origin = 'eureca',
  originList,
  onClickItem,
  onClickCard,
  ...props
}) {
  const opportunityCardStyles = useStyles();
  const [anchor, setAnchor] = useState();

  function handleClick(event) {
    setAnchor(event.currentTarget);
  }

  function handleClose() {
    setAnchor(null);
  }

  return (
    <Box width={256}>
      <Card classes={opportunityCardStyles}>
        <CardActionArea onClick={() => onClickCard(id)}>
          <Box position="relative">
            <ImageComponent image={image || PlaceholderImage} />
            {origin !== 'eureca' && (
              <Chips
                label={originList[origin]?.label}
                size="small"
                style={{
                  position: 'absolute',
                  top: 8,
                  right: 8,
                  background: originList[origin]?.background,
                  color: originList[origin]?.color,
                  fontSize: '.6875rem',
                }}
              />
            )}
          </Box>
          <CardContent>
            <Flex directionRow alignCenter>
              <Box mr={1}>
                <Ball color={statusColor} />
              </Box>
              <Typography title={title} variant="subtitle1" style={{ fontSize: '.875rem' }} noWrap>
                {title}
              </Typography>
            </Flex>
            <Box mt={0.5} ml={3}>
              <Typography
                variant="subtitle2"
                style={{ fontSize: '.75rem', lineHeight: '18px' }}
                noWrap
              >
                {subtitle}
              </Typography>
            </Box>
          </CardContent>
        </CardActionArea>
        <Divider />
        <CardActions>
          <Flex
            direction="row"
            alignItems="center"
            justifyContent="space-between"
            flexGrow={1}
            pl={1}
          >
            <Flex direction="row" alignItems="center">
              {['like', 'candidates', 'jobs'].map(
                cat =>
                  props[cat] && (
                    <Flex
                      key={cat}
                      direction="row"
                      mr={3}
                      alignItems="center"
                      aria-label={cat}
                      title={cat}
                    >
                      <IconContext.Provider value={{ size: '.75rem' }}>
                        {cardIcons[cat]}
                      </IconContext.Provider>
                      <Box ml={1}>
                        <Typography variant="subtitle2" style={{ fontSize: '.75rem' }}>
                          {props[cat]}
                        </Typography>
                      </Box>
                    </Flex>
                  )
              )}
            </Flex>
            {menuOptions && (
              <Box ml={2}>
                <EllipsisTrigger onClick={handleClick} />
                <IconAndLabelMenuList
                  anchor={anchor}
                  onClose={handleClose}
                  options={menuOptions}
                  onClick={(e, value) => onClickItem(value)}
                />
              </Box>
            )}
          </Flex>
        </CardActions>
      </Card>
    </Box>
  );
}

OpportunityCard.defaultProps = {
  id: null,
  title: '',
  subtitle: '',
  statusColor: null,
  menuOptions: [
    {
      id: null,
      icon: {},
      value: '',
      label: '',
    },
  ],
  image: '',
  like: null,
  origin: '',
  originList: {},
  onClickItem: () => {},
};

OpportunityCard.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  statusColor: PropTypes.string,
  menuOptions: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      icon: PropTypes.object,
      value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      label: PropTypes.string,
    })
  ),
  image: PropTypes.string,
  like: PropTypes.number,
  origin: PropTypes.string,
  originList: PropTypes.object,
  onClickItem: PropTypes.func,
};

export { OpportunityCard };