@eureca/eureca-ui/src/components/Display/display.js

UI component library of Eureca's user and admin apps

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

import { Flex } from '../Flex';
import { MediaPlayer } from './media-player';
import { PDFViewer } from './pdf-viewer';

function Display({ challenge }) {
  const SwitchCase = () => {
    switch (challenge.type) {
      case 'pdf':
        return <PDFViewer pdf={challenge.source} />;
      case 'link':
        return (
          <a href={challenge.source} target="_blank" rel="noopener noreferrer">
            {challenge.source}
          </a>
        );
      case 'video':
        return <MediaPlayer type={challenge.type} source={challenge.source} />;
      case 'audio':
        return <MediaPlayer type={challenge.type} source={challenge.source} />;
      default:
        return 'Formato desconhecido';
    }
  };

  return (
    <Flex px={2} py={3} height="calc(100vh - 218px)">
      <SwitchCase />
    </Flex>
  );
}

Display.propTypes = {
  challenge: PropTypes.shape({
    type: PropTypes.string.isRequired,
    source: PropTypes.string.isRequired,
  }),
};

export { Display };