@eureca/eureca-ui/src/components/OpportunityTypes/index.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

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

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

function OpportunityTypes({ types, onClick, ...props }) {
  return (
    <Flex directionRow style={{ overflowX: 'auto' }} width={1} {...props}>
      {types.map(item => {
        const { color, id, icon, label } = item;
        return (
          <Flex key={id} cursorPointer alignCenter mr={[5, 4, 4]} onClick={() => onClick(id)}>
            <Flex
              justifyCenter
              alignCenter
              width={[72, 72, 56]}
              height={[72, 72, 56]}
              mb={1.5}
              bgcolor={color}
              borderRadius="50%"
            >
              {React.cloneElement(icon, {
                style: { height: '50%', fill: colors.white },
              })}
            </Flex>
            <Typography>{label}</Typography>
          </Flex>
        );
      })}
    </Flex>
  );
}

OpportunityTypes.propTypes = {
  types: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      label: PropTypes.string,
      color: PropTypes.string,
      icon: PropTypes.object,
    })
  ).isRequired,
  onClick: PropTypes.func.isRequired,
};

OpportunityTypes.defaultProps = {
  types: {
    id: 0,
    label: '',
    color: '',
    icon: {},
  },
  onClick: () => {},
};

export { OpportunityTypes };