Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Box, Typography } from '@mui/material';

import QuizTimer from './quiz-timer';

function SlideProgress({ points, time, currentQuestion, totalQuestions, onTimeEnd }) {
  return (
    <Box
      sx={{
        p: 2,
        pb: 0,
        width: '100%'
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 2
        }}
      >
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          <Typography variant='overline'>{points}</Typography>
          <Typography variant='overline'>Puntos</Typography>
        </Box>

        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          <QuizTimer time={time} onStop={onTimeEnd} />
          <Typography variant='overline'>Tiempo</Typography>
        </Box>

        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          <Typography variant='overline'>{`${currentQuestion}/${totalQuestions}`}</Typography>
          <Typography variant='overline'>Preguntas</Typography>
        </Box>
      </Box>
    </Box>
  );
}

export default SlideProgress;