Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import Slider from 'react-slick'
import styled from 'styled-components'
import IconButton from '@mui/material/IconButton'
import NavigateNextIcon from '@mui/icons-material/NavigateNext'
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'

import CapsuleItem from './CapsuleItem'

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 = ({ onClick }) => {
  return (
    <IconButton onClick={onClick}>
      <NavigateNextIcon />
    </IconButton>
  )
}

const SamplePrevArrow = ({ onClick }) => {
  return (
    <IconButton onClick={onClick}>
      <NavigateBeforeIcon />
    </IconButton>
  )
}

const CapsulesList = ({ 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 (
    <StyledSlider {...settings}>
      {capsules.map((capsule, index) => (
        <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
      ))}
    </StyledSlider>
  )
}

export default CapsulesList