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

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { Typography, Box, useTheme } from '@material-ui/core';
import { Flex } from '../Flex';
import { TextInput } from '../Inputs';
import { FileUpload } from '../Buttons';

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

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

export const FileVideo = ({ onChange }) => {
  return (
    <Flex directionRow alignCenter>
      <TextInput variant="standard" label="Insira o link do vídeo aqui" onChange={onChange} />
      <Box ml={4}>
        <Typography variant="body2" style={{ color: colors.gray3, lineHeight: 1.125 }}>
          Pode ser link do Youtube, Vimeo, Arquivo no Google Drive, Onedrive, Dropbox, etc...
          Garanta que a solução está funcional!
        </Typography>
      </Box>
    </Flex>
  );
};

FileVideo.propTypes = {
  onChange: PropTypes.func.isRequired,
};

export const FileUploadButton = ({ onChange }) => {
  const size = useWindowSize();
  const theme = useTheme();
  const isMobile = size?.width < theme.breakpoints.values.sm;
  const [showText, setShowText] = useState(true);

  function handleFileChange(value) {
    onChange(value);
    setShowText(value.length > 0);
  }

  return (
    <Flex directionRow={!isMobile} alignCenter={!isMobile}>
      <FileUpload fileType="pdf" onChange={handleFileChange} />
      {!showText && (
        <Box mt={[1, 0]}>
          <Typography variant="body2" style={{ color: colors.gray3 }}>
            O seu arquivo deve ter até 5MB
          </Typography>
        </Box>
      )}
    </Flex>
  );
};

FileUpload.propTypes = {
  onChange: PropTypes.func.isRequired,
};