Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from 'react'
import Slider from 'react-slick'
import styled from 'styled-components'
import CapsuleItem from './CapsuleItem'

const StyledSlider = styled(Slider)`
    .slick-list {
        padding: 0 !important;
    }
    .slick-track {
        display: flex;
        height: 320px;
    }
    .slick-slide, .slick-slide > div{
      height: 100%;
    }
    .slick-prev:before, .slick-next:before {
        color: #FBFBFB !important;
        font-size: 24px;
    }
    .slick-prev, .slick-next {
        width: 24px;
        height: 22px;
        position: relative;
    }
    @media (max-width:768px) {
        .slick-prev{
            left: auto;
            margin-left: auto;
            margin-right: .5rem;
            grid-row: 1;
        }
        .slick-next {
            right: 0;
            grid-row: 1;
        }
    }
`

const SampleNextArrow = ({ className, style, onClick }) => {
  return (
        <div
            className={className}
            style={{ ...style, display: 'block', backgroundColor: '#D9D9D9', borderRadius: '100px' }}
            onClick={onClick}
        />
  )
}

const SamplePrevArrow = ({ className, style, onClick }) => {
  return (
        <div
            className={className}
            style={{ ...style, display: 'block', backgroundColor: '#D9D9D9', borderRadius: '100px' }}
            onClick={onClick}
        />
  )
}

const CapsulesList = ({ category, capsules, onEnroll }) => {
  const settings = {
    infinite: true,
    speed: 1500,
    slidesToShow: capsules.length < 4 ? capsules.length : 4,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 0
        }
      },
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          initialSlide: 0
        }
      }
    ]
  }

  return (
        <>
            <h3 className="p-2" style={{ fontWeight: '700' }}>{category === 'capsules' ? 'Cápsulas' : 'Recompensas' } de Microaprendizaje</h3>
            <StyledSlider {...settings}>
                {capsules.map((capsule, index) =>
                    <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
                )}
            </StyledSlider>
        </>
  )
}

export default CapsulesList