@eureca/eureca-ui/src/components/Cards/submit-solution.js

UI component library of Eureca's user and admin apps

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

import { IconContext } from 'react-icons';

import { Flex } from '../Flex';
import { Card } from './card';
import { FileVideo, FileUploadButton } from './submit-solution-helper';

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

const muiTheme = createMuiTheme();

const styles = {
  divider: {
    width: '100%',
    height: '1px',
    backgroundColor: colors.gray5,
  },
  description: {
    color: colors.gray3,
    lineHeight: 1.125,
    fontWeight: muiTheme.typography.fontWeightRegular,
  },
};

function SubmitSolutionCard({ type, title, icon, onChange }) {
  function handleChange(v) {
    if (typeof onChange === 'function') onChange(v);
  }

  const chooseComponent = {
    pdf: <FileUploadButton onChange={file => handleChange(file)} />,
    audio: <FileUploadButton onChange={file => handleChange(file)} />,
    video: <FileVideo onChange={e => handleChange(e.target.value)} />,
  };

  return (
    <Card width={1} height={1}>
      <Box pt={4} pb={5} px={[2, 12]}>
        <Flex directionRow alignCenter justifySpaceBetween>
          <Typography variant="h3">Enviar Solução</Typography>
          <Flex directionRow alignCenter>
            <Box pr={1}>
              <IconContext.Provider value={{ color: colors.green1, size: '1.25rem' }}>
                {icon}
              </IconContext.Provider>
            </Box>

            <Typography variant="body2" style={{ color: colors.gray3 }}>
              {title}
            </Typography>
          </Flex>
        </Flex>
        <Box mt={2} mb={3}>
          <div id="divider" style={styles.divider} />
        </Box>
        <Typography
          style={{
            fontWeight: muiTheme.typography.fontWeightBold,
            color: colors.gray3,
          }}
        >
          Está pronto para enviar a solução?
        </Typography>
        <Box my={4}>
          <Typography variant="body1" style={styles.description}>
            Preste muita atenção! Seu desafio será avaliado por seres humanos e eles vão ver se você
            seguiu as orientações do regulamento e mais uma série de atributos que somente esses
            avaliadores estão orientados a fazer. Beleza?
          </Typography>
        </Box>
        {chooseComponent[type]}
      </Box>
    </Card>
  );
}

SubmitSolutionCard.propTypes = {
  type: 'pdf',
  title: '',
  icon: null,
  onChange: () => {},
};

SubmitSolutionCard.propTypes = {
  type: PropTypes.oneOf(['pdf', 'audio', 'video']).isRequired,
  title: PropTypes.string,
  icon: PropTypes.object,
  onChange: PropTypes.func.isRequired,
};

export { SubmitSolutionCard };