Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3481 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React from 'react';
2 
import { Box, Typography } from '@mui/material';
3 
 
4 
import QuizTimer from './quiz-timer';
5 
 
6 
function SlideProgress({ points, time, currentQuestion, totalQuestions, onTimeEnd }) {
7 
  return (
8 
    <Box
9 
      sx={{
10 
        p: 2,
11 
        pb: 0,
12 
        width: '100%'
13 
      }}
14 
    >
15 
      <Box
16 
        sx={{
17 
          display: 'flex',
18 
          alignItems: 'center',
19 
          justifyContent: 'space-between',
20 
          gap: 2
21 
        }}
22 
      >
23 
        <Box
24 
          sx={{
25 
            display: 'flex',
26 
            flexDirection: 'column',
27 
            alignItems: 'center'
28 
          }}
29 
        >
30 
          <Typography variant='overline'>{points}</Typography>
31 
          <Typography variant='overline'>Puntos</Typography>
32 
        </Box>
33 
 
34 
        <Box
35 
          sx={{
36 
            display: 'flex',
37 
            flexDirection: 'column',
38 
            alignItems: 'center'
39 
          }}
40 
        >
41 
          <QuizTimer time={time} onStop={onTimeEnd} />
42 
          <Typography variant='overline'>Tiempo</Typography>
43 
        </Box>
44 
 
45 
        <Box
46 
          sx={{
47 
            display: 'flex',
48 
            flexDirection: 'column',
49 
            alignItems: 'center'
50 
          }}
51 
        >
52 
          <Typography variant='overline'>{`${currentQuestion}/${totalQuestions}`}</Typography>
53 
          <Typography variant='overline'>Preguntas</Typography>
54 
        </Box>
55 
      </Box>
56 
    </Box>
57 
  );
58 
}
59 
 
60 
export default SlideProgress;