Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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