Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5271 | Rev 5294 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5271 Rev 5293
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from 'react'
 2 
import React from 'react'
3 
import Slider from 'react-slick'
 3 
import Slider from 'react-slick'
4 
import styled from 'styled-components'
 4 
import styled from 'styled-components'
5 
import CapsuleItem from './CapsuleItem'
 5 
import CapsuleItem from './CapsuleItem'
- 
 
 6 
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
- 
 
 7 
import NavigateNextIcon from '@mui/icons-material/NavigateNext'
Línea 6... Línea 8...
6 
 
 8 
 
7 
const StyledSlider = styled(Slider)`
 9 
const StyledSlider = styled(Slider)`
8 
    .slick-list {
 - 
 
9 
        padding: 0 !important;
 - 
 
10 
    }
 - 
 
11 
    .slick-track {
 10 
    .slick-slider {
12 
        display: flex;
 - 
 
13 
    }
 - 
 
14 
    .slick-prev:before, .slick-next:before {
 11 
      display: grid;
15 
        color: #FBFBFB !important;
 12 
      grid-template-rows: 2rem auto;
16 
        font-size: 24px;
 13 
      grid-template-columns: 1fr 30px 30px;
17 
    }
 14 
    }
18 
    .slick-prev, .slick-next {
 - 
 
19 
        width: 24px;
 - 
 
20 
        height: 22px;
 15 
    .slick-prev, .slick-next {
- 
 
 16 
        position: relative;
- 
 
 17 
        width: 28px;
- 
 
 18 
        height: 28px;
21 
        position: relative;
 19 
        border: 1px solid var(--border-primary);
22 
    }
 - 
 
23 
    @media (max-width:768px) {
 20 
    }
24 
        .slick-prev{
 21 
    .slick-prev{
25 
            left: auto;
 - 
 
26 
            margin-left: auto;
 - 
 
27 
            margin-right: .5rem;
 22 
      grid-row: 1;
28 
            grid-row: 1;
 23 
      grid-column: 2/3;
29 
        }
 24 
    }
30 
        .slick-next {
 25 
    .slick-next {
31 
            right: 0;
 26 
      grid-row: 1;
32 
            grid-row: 1;
 - 
 
33 
        }
 27 
      grid-column: 3/4;
34 
    }
 28 
    }
Línea 35... Línea 29...
35 
`
 29 
`
36 
 
 30 
 
37 
const SampleNextArrow = ({ className, style, onClick }) => {
 31 
const SampleNextArrow = ({ className, onClick }) => {
38 
  return (
 32 
  return (
39 
        <div
 - 
 
40 
            className={className}
 33 
    <button
41 
            style={{ ...style, display: 'block', backgroundColor: '#D9D9D9', borderRadius: '100px' }}
 34 
      className={className}
- 
 
 35 
      onClick={onClick}
- 
 
 36 
    >
42 
            onClick={onClick}
 37 
      <NavigateNextIcon />
43 
        />
 38 
    </button>
Línea 44... Línea 39...
44 
  )
 39 
  )
45 
}
 40 
}
46 
 
 41 
 
47 
const SamplePrevArrow = ({ className, style, onClick }) => {
 42 
const SamplePrevArrow = ({ className, onClick }) => {
48 
  return (
 - 
 
49 
        <div
 43 
  return (
50 
            className={className}
 44 
    <button
- 
 
 45 
      className={className}
- 
 
 46 
      onClick={onClick}
51 
            style={{ ...style, display: 'block', backgroundColor: '#D9D9D9', borderRadius: '100px' }}
 47 
    >
52 
            onClick={onClick}
 48 
      <NavigateBeforeIcon />
Línea 53... Línea 49...
53 
        />
 49 
    </button>
54 
  )
 50 
  )
Línea 81... Línea 77...
81 
      }
 77 
      }
82 
    ]
 78 
    ]
83 
  }
 79 
  }
Línea 84... Línea 80...
84 
 
 80 
 
85 
  return (
 81 
  return (
86 
        <>
 82 
    <>
87 
            <h3 className="p-2" style={{ fontWeight: '700' }}>{category === 'capsules' ? 'Cápsulas' : 'Recompensas' } de Microaprendizaje</h3>
 83 
      <h3 className="p-2" style={{ fontWeight: '700' }}>{category === 'capsules' ? 'Cápsulas' : 'Recompensas'} de Microaprendizaje</h3>
88 
            <StyledSlider {...settings}>
 84 
      <StyledSlider {...settings}>
89 
                {capsules.map((capsule, index) =>
 85 
        {capsules.map((capsule, index) =>
90 
                    <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
 86 
          <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
91 
                )}
 87 
        )}
92 
            </StyledSlider>
 88 
      </StyledSlider>
93 
        </>
 89 
    </>
94 
  )
 90 
  )
Línea 95... Línea 91...
95 
}
 91 
}