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;
  column-gap: 10px;
  grid-template-rows: 2rem auto;
  grid-template-columns: 1fr 30px 30px;

  .slick-list {
    grid-row: 2/3;
    grid-column: 1/4;
    padding: 1.5rem 0 0;
  }
  .slick-track {
    display: flex;
    gap: 1rem;
  }
`

const ArrowButton = styled(IconButton)`
  border: 1px solid var(--font-color) !important;
  color: var(--font-color) !important;
  grid-row: 1;
  transition: all 200ms ease;

  &:hover {
    background-color: var(--font-color) !important;
    color: var(--bg-color) !important;
  }
`

const StyledNextArrow = styled(ArrowButton)`
  grid-column: 3;
`

const StyledPrevArrow = styled(ArrowButton)`
  grid-column: 2;
`

const NextArrow = ({ onClick }) => {
  return (
    <StyledNextArrow onClick={onClick}>
      <NavigateNextIcon />
    </StyledNextArrow>
  )
}

const PrevArrow = ({ onClick }) => {
  return (
    <StyledPrevArrow onClick={onClick}>
      <NavigateBeforeIcon />
    </StyledPrevArrow>
  )
}

const CapsulesList = ({ capsules, onEnroll }) => {
  const settings = {
    infinite: true,
    speed: 1500,
    slidesToShow: capsules.length < 4 ? capsules.length : 4,
    slidesToScroll: 1,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    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