Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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