Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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