Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5235 | Rev 5269 | 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'
6 
 
7 
const StyledSlider = styled(Slider)`
8 
    .slick-list {
9 
        padding: 0 !important;
10 
    }
11 
    .slick-track {
12 
        display: flex;
5268 stevensc 13 
        height: 300px;
5182 stevensc 14 
    }
5268 stevensc 15 
    .slick-slide, .slick-slide > div{
16 
      height: 100%;
17 
    }
5182 stevensc 18 
    .slick-prev:before, .slick-next:before {
19 
        color: #FBFBFB !important;
20 
        font-size: 24px;
21 
    }
22 
    .slick-prev, .slick-next {
23 
        width: 24px;
24 
        height: 22px;
25 
        position: relative;
26 
    }
27 
    @media (max-width:768px) {
28 
        .slick-prev{
29 
            left: auto;
30 
            margin-left: auto;
31 
            margin-right: .5rem;
32 
            grid-row: 1;
33 
        }
34 
        .slick-next {
35 
            right: 0;
36 
            grid-row: 1;
37 
        }
38 
    }
39 
`
40 
 
41 
const SampleNextArrow = ({ className, style, onClick }) => {
42 
  return (
43 
        <div
44 
            className={className}
45 
            style={{ ...style, display: 'block', backgroundColor: '#D9D9D9', borderRadius: '100px' }}
46 
            onClick={onClick}
47 
        />
48 
  )
49 
}
50 
 
51 
const SamplePrevArrow = ({ className, style, onClick }) => {
52 
  return (
53 
        <div
54 
            className={className}
55 
            style={{ ...style, display: 'block', backgroundColor: '#D9D9D9', borderRadius: '100px' }}
56 
            onClick={onClick}
57 
        />
58 
  )
59 
}
60 
 
5228 stevensc 61 
const CapsulesList = ({ category, capsules, onEnroll }) => {
5182 stevensc 62 
  const settings = {
63 
    infinite: true,
64 
    speed: 1500,
5235 stevensc 65 
    slidesToShow: capsules.length < 4 ? capsules.length : 4,
5182 stevensc 66 
    slidesToScroll: 1,
67 
    nextArrow: <SampleNextArrow />,
68 
    prevArrow: <SamplePrevArrow />,
69 
    responsive: [
70 
      {
71 
        breakpoint: 768,
72 
        settings: {
73 
          slidesToShow: 2,
74 
          slidesToScroll: 2,
75 
          initialSlide: 0
76 
        }
77 
      },
78 
      {
79 
        breakpoint: 1024,
80 
        settings: {
81 
          slidesToShow: 3,
82 
          slidesToScroll: 3,
83 
          initialSlide: 0
84 
        }
85 
      }
86 
    ]
87 
  }
88 
 
89 
  return (
90 
        <>
5231 stevensc 91 
            <h3 className="p-2" style={{ fontWeight: '700' }}>{category === 'capsules' ? 'Cápsulas' : 'Recompensas' } de Microaprendizaje</h3>
5182 stevensc 92 
            <StyledSlider {...settings}>
93 
                {capsules.map((capsule, index) =>
94 
                    <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
95 
                )}
96 
            </StyledSlider>
97 
        </>
98 
  )
99 
}
100 
 
101 
export default CapsulesList