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'
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
import NavigateNextIcon from '@mui/icons-material/NavigateNext'

const StyledSlider = styled(Slider)`
    display: grid;
    grid-template-rows: 2rem auto;
    grid-template-columns: 1fr 30px 30px;
    
    .slick-prev, .slick-next {
      position: relative;
        border: 1px solid var(--font-color);
        border-radius: 50%;
        height: 28px;
        left: auto;
        top: 1rem;
        right: auto;
        width: 28px;
        color: var(--font-color);
        &::before{
          content: none !important;
        }
    }
    .slick-list{
      grid-row: 2/3;
      grid-column: 1/4;
      padding: 1.5rem 0 0;
    }
    .slick-track{
      display: flex;
      gap: 1rem;
    }
    .slick-prev{
      grid-row: 1;
      grid-column: 2/3;
    }
    .slick-next {
      grid-row: 1;
      grid-column: 3/4;
    }
`

const SampleNextArrow = ({ className, onClick }) => {
  return (
    <button
      className={className}
      onClick={onClick}
    >
      <NavigateNextIcon />
    </button>
  )
}

const SamplePrevArrow = ({ className, onClick }) => {
  return (
    <button
      className={className}
      onClick={onClick}
    >
      <NavigateBeforeIcon />
    </button>
  )
}

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="mt-3" 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