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

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { Box, Typography, useTheme } from '@material-ui/core';

import { IconContext } from 'react-icons';

import { colors } from '../../theme/colors';
import { useWindowSize } from '../../hooks/useWindowSizeSSR';

import { Card } from './card';
import { Flex } from '../Flex';

const styles = isTablet => ({
  text: {
    color: colors.gray3,
    textAlign: isTablet ? 'left' : 'center',
  },
});

function UserHomeCard({ icon, color, title, children, onClick, ...props }) {
  const { breakpoints } = useTheme();
  const size = useWindowSize();
  const style = styles(size?.width < breakpoints.values.md);

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

  return (
    <Card
      p={3}
      onClick={handleClick}
      minHeight={[null, null, 210]}
      style={{ cursor: onClick && 'pointer', boxSizing: 'border-box' }}
      {...props}
    >
      <Flex alignCenter flexDirection={['row', 'row', 'column']}>
        <Flex
          mr={[1, 1, 0]}
          alignCenter
          justifyCenter
          borderRadius="50%"
          minWidth={72}
          minHeight={72}
          bgcolor={color}
        >
          <IconContext.Provider value={{ color: colors.white, size: 32 }}>
            {icon}
          </IconContext.Provider>
        </Flex>
        <Flex justifyCenter alignItems={['flex-start', 'flex-start', 'center']}>
          <Box py={1}>
            <Typography variant="subtitle1" style={{ color: color }}>
              {title}
            </Typography>
          </Box>

          <Typography variant="subtitle2" style={style.text}>
            {children}
          </Typography>
        </Flex>
      </Flex>
    </Card>
  );
}

export { UserHomeCard };

UserHomeCard.defaultProps = {
  icon: null,
  title: '',
  onClick: () => {},
  color: 'transparent',
  children: null,
};

UserHomeCard.propTypes = {
  icon: PropTypes.object,
  title: PropTypes.string,
  onClick: PropTypes.func,
  color: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
};