Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3481 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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