Proyectos de Subversion LeadersLinked - SPA

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

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