Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3481 Rev 3493
Línea 1... Línea 1...
1 
import React from 'react';
 1 
import React from 'react';
2 
import { useNavigate } from 'react-router-dom';
 2 
import { Link } from 'react-router-dom';
3 
import { Box, styled, Typography } from '@mui/material';
 3 
import { Box, Button, styled, Typography } from '@mui/material';
- 
 
 4 
import { NavigateNext } from '@mui/icons-material';
Línea 4... Línea 5...
4 
 
 5 
 
Línea 5... Línea 6...
5 
import { parse } from '@utils';
 6 
import { parse } from '@utils';
Línea 6... Línea -...
6 
 
 - 
 
7 
import CapsuleButton from './CapsuleButton';
 - 
 
8 
 
 - 
 
9 
const StyledCapsuleContainer = styled(Box)`
 - 
 
10 
  border-radius: 6px;
 - 
 
11 
  background: var(--font-color);
 - 
 
12 
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.14);
 - 
 
13 
  padding: 16px;
 - 
 
14 
  display: flex;
 - 
 
15 
  align-items: center;
 - 
 
16 
  gap: 1rem;
 - 
 
17 
  p {
 - 
 
18 
    color: #fff;
 - 
 
19 
    font-family: 'Roboto Condensed', 'Roboto';
 - 
 
20 
    font-size: 14px;
 - 
 
21 
    font-weight: 400;
 - 
 
22 
    line-height: normal;
 - 
 
23 
    margin-bottom: 8px;
 - 
 
24 
  }
 - 
 
25 
  h3 {
 - 
 
26 
    color: var(--subtitle-color);
 - 
 
27 
  }
 - 
 
28 
`;
 - 
 
29 
 
 - 
 
30 
const StyledDetails = styled('div')`
 - 
 
31 
  display: block;
 - 
 
32 
  flex: 1;
 7 
 
33 
`;
 8 
import { Card, CardContent } from '@shared/components';
34 
 
 - 
 
35 
const StyledImage = styled('picture')`
 9 
 
36 
  border-radius: 6px;
 10 
const CardImage = styled('img')(({ theme }) => ({
37 
  overflow: hidden;
 - 
 
38 
  max-width: 100px;
 - 
 
39 
  aspect-ratio: 1/1.5;
 - 
 
40 
  background-color: var(--bg-color-secondary);
 - 
 
41 
  img {
 11 
  borderRadius: theme.shape.borderRadius,
42 
    width: 100%;
 - 
 
43 
    height: 100%;
 12 
  maxWidth: 100,
44 
    object-fit: cover;
 - 
 
45 
  }
 - 
 
46 
`;
 - 
 
47 
 
 - 
 
48 
const StyledTag = styled('div')`
 - 
 
49 
  font-size: 12px;
 - 
 
50 
  font-weight: 700;
 - 
 
51 
  text-transform: uppercase;
 - 
 
52 
  padding: 5px 10px;
 - 
 
53 
  color: #fff;
 - 
 
54 
  border-radius: 5px;
 - 
 
55 
`;
 - 
 
Línea -... Línea 13...
- 
 
 13 
  aspectRatio: '1/1.5',
56 
 
 14 
  objectFit: 'cover'
57 
export function CapsuleCard({ capsule: { name, description, image, completed, uuid }, ...rest }) {
 15 
}));
58 
  const navigate = useNavigate();
 16 
 
59 
 
 17 
export function CapsuleCard({ capsule: { name, description, image, completed, uuid } }) {
60 
  return (
 - 
 
61 
    <StyledCapsuleContainer {...rest}>
 - 
 
62 
      <StyledDetails active>
 18 
  return (
- 
 
 19 
    <Card>
63 
        <StyledTag>{completed ? 'Completa' : 'En curso'}</StyledTag>
 20 
      <CardContent>
64 
 
 - 
 
65 
        <Typography variant='h3' mt={2}>
 21 
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
66 
          {name}
 22 
          <Box>
67 
        </Typography>
 23 
            <Typography variant='caption'>{completed ? 'Completa' : 'En curso'}</Typography>
68 
 
 24 
            <Typography variant='h2'>{name}</Typography>
69 
        {parse(description)}
 25 
            <Typography>{parse(description)}</Typography>
70 
 
 26 
 
71 
        <CapsuleButton
 27 
            <Button LinkComponent={Link} to={`/microlearning/capsules/${uuid}/slides`}>
72 
          label='Ver cápsula'
 28 
              Ver cápsula
73 
          onClick={() => navigate(`/microlearning/capsules/${uuid}/slides`)}
 - 
 
74 
        />
 29 
              <NavigateNext fontSize='small' />
75 
      </StyledDetails>
 30 
            </Button>
76 
 
 31 
          </Box>
- 
 
 32 
 
77 
      <StyledImage>
 33 
          <CardImage src={image} alt={name} />
78 
        <img src={image} alt={name} />
 34 
        </Box>