Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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