Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Box } from '@mui/material';
import { CheckCircle } from '@mui/icons-material';

import { parse } from '@shared/utils';
import SlideQuiz from './slide-quiz';

export function SlideCard({
  slide: { type, file, description, name, quiz_data, link_take_a_test },
  completed,
  autoPlay = false,
  onComplete
}) {
  const filesRender = {
    video: (
      <video autoPlay={autoPlay} controls controlsList='nodownload' onEnded={onComplete}>
        <source src={file} />
      </video>
    ),

    image: <img src={file} alt={name} />,

    audio: <audio controls src={file} alt={name} onEnded={onComplete} />,

    text: parse(description),

    document: (
      <a href={file} target='_blank' rel='noreferrer'>
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
      </a>
    ),

    quiz: (
      <SlideQuiz
        quiz={quiz_data ? quiz_data[0] : {}}
        startUrl={link_take_a_test}
        slide={{ type, file, description, name, quiz_data, link_take_a_test }}
        onSync={onComplete}
        completed={completed}
      />
    )
  };

  return (
    <Box
      sx={{
        width: '100%',
        minwidth: { xs: '80vw', md: '500px', lg: '800px' },
        overflow: 'hidden',
        borderRadius: '20px',
        position: 'relative',
        '& > svg': {
          position: 'absolute',
          top: '1rem',
          right: '1rem'
        },
        '& img, & video': {
          margin: 'auto',
          width: { xs: '80vw', md: '500px', lg: '800px' },
          maxHeight: '500px',
          objectFit: 'contain'
        },
        '& > img, & > video, & > audio, & > a, & > p': {
          margin: 'auto'
        }
      }}
    >
      {filesRender[type]}
      {completed && <CheckCircle color='success' />}
    </Box>
  );
}