Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5271 | Rev 5294 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5182 stevensc 1 
/* eslint-disable react/prop-types */
2 
import React from 'react'
3 
import Slider from 'react-slick'
4 
import styled from 'styled-components'
5 
import CapsuleItem from './CapsuleItem'
5293 stevensc 6 
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
7 
import NavigateNextIcon from '@mui/icons-material/NavigateNext'
5182 stevensc 8 
 
9 
const StyledSlider = styled(Slider)`
5293 stevensc 10 
    .slick-slider {
11 
      display: grid;
12 
      grid-template-rows: 2rem auto;
13 
      grid-template-columns: 1fr 30px 30px;
5182 stevensc 14 
    }
15 
    .slick-prev, .slick-next {
16 
        position: relative;
5293 stevensc 17 
        width: 28px;
18 
        height: 28px;
19 
        border: 1px solid var(--border-primary);
5182 stevensc 20 
    }
5293 stevensc 21 
    .slick-prev{
22 
      grid-row: 1;
23 
      grid-column: 2/3;
5182 stevensc 24 
    }
5293 stevensc 25 
    .slick-next {
26 
      grid-row: 1;
27 
      grid-column: 3/4;
28 
    }
5182 stevensc 29 
`
30 
 
5293 stevensc 31 
const SampleNextArrow = ({ className, onClick }) => {
5182 stevensc 32 
  return (
5293 stevensc 33 
    <button
34 
      className={className}
35 
      onClick={onClick}
36 
    >
37 
      <NavigateNextIcon />
38 
    </button>
5182 stevensc 39 
  )
40 
}
41 
 
5293 stevensc 42 
const SamplePrevArrow = ({ className, onClick }) => {
5182 stevensc 43 
  return (
5293 stevensc 44 
    <button
45 
      className={className}
46 
      onClick={onClick}
47 
    >
48 
      <NavigateBeforeIcon />
49 
    </button>
5182 stevensc 50 
  )
51 
}
52 
 
5228 stevensc 53 
const CapsulesList = ({ category, capsules, onEnroll }) => {
5182 stevensc 54 
  const settings = {
55 
    infinite: true,
56 
    speed: 1500,
5235 stevensc 57 
    slidesToShow: capsules.length < 4 ? capsules.length : 4,
5182 stevensc 58 
    slidesToScroll: 1,
59 
    nextArrow: <SampleNextArrow />,
60 
    prevArrow: <SamplePrevArrow />,
61 
    responsive: [
62 
      {
63 
        breakpoint: 768,
64 
        settings: {
65 
          slidesToShow: 2,
66 
          slidesToScroll: 2,
67 
          initialSlide: 0
68 
        }
69 
      },
70 
      {
71 
        breakpoint: 1024,
72 
        settings: {
73 
          slidesToShow: 3,
74 
          slidesToScroll: 3,
75 
          initialSlide: 0
76 
        }
77 
      }
78 
    ]
79 
  }
80 
 
81 
  return (
5293 stevensc 82 
    <>
83 
      <h3 className="p-2" style={{ fontWeight: '700' }}>{category === 'capsules' ? 'Cápsulas' : 'Recompensas'} de Microaprendizaje</h3>
84 
      <StyledSlider {...settings}>
85 
        {capsules.map((capsule, index) =>
86 
          <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
87 
        )}
88 
      </StyledSlider>
89 
    </>
5182 stevensc 90 
  )
91 
}
92 
 
93 
export default CapsulesList