@eureca/eureca-ui/src/components/Cards/user-career.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 { Box, Typography, useTheme } from '@material-ui/core';
import { Card } from '../Cards/card';
import { Flex } from '../Flex';
import { Chips } from '../Chips';
import { Avatar } from '../Avatar';

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

const styles = {
  card: {
    cursor: 'pointer',
    overflow: 'hidden',
  },
  divider: {
    borderBottom: `1px solid ${colors.gray3}`,
    opacity: 0.2,
  },
  organizationLogo: {
    borderRadius: '50%',
    borderWidth: 1,
    backgroundColor: colors.white,
    boxShadow: shadows.clientEllipse,
    objectFit: 'unset',
  },
  title: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
  chips: {
    fontSize: 10,
    backgroundColor: colors.gray4,
    height: 16,
  },
};

const CareerCardUser = ({ title, type, date, image, place, onClick, ...props }) => {
  const theme = useTheme();

  const handleClickCareer = () => {
    if (onClick) {
      onClick();
    }
  };

  return (
    <Card px={2} onClick={handleClickCareer} style={styles.card} {...props}>
      <Flex directionRow justifyFlexStart alignCenter py={2}>
        <Box mr={1}>
          <Avatar
            name={`${title}-organization`}
            size={theme.spacing(8)}
            src={image}
            style={styles.organizationLogo}
            onClick={handleClickCareer}
          />
        </Box>
        <Flex width={theme.spacing(25)}>
          <Typography variant="body1" title={title} style={styles.title}>
            {title}
          </Typography>
          <Box mt={1}>
            <Typography variant="body2" style={{ color: colors.gray3 }}>
              {place}
            </Typography>
          </Box>
        </Flex>
      </Flex>
      <div style={styles.divider} />
      <Flex py={1} directionRow justifySpaceBetween alignCenter>
        <Typography variant="overline">Inscrições até {format(date, 'dd/MM/yyyy')}</Typography>
        <Chips label={type} style={styles.chips} />
      </Flex>
    </Card>
  );
};

CareerCardUser.propTypes = {
  title: '',
  type: '',
  date: new Date(),
  image: '',
  place: '',
  onClick: () => {},
};

CareerCardUser.propTypes = {
  title: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  date: PropTypes.instanceOf(Date).isRequired,
  image: PropTypes.string.isRequired,
  place: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

export { CareerCardUser };