Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6996 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6993 stevensc 1 
import React from 'react'
2 
import Slider from 'react-slick'
3 
import styled from 'styled-components'
4 
import IconButton from '@mui/material/IconButton'
5 
import NavigateNextIcon from '@mui/icons-material/NavigateNext'
6 
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
7 
 
8 
import CapsuleItem from './CapsuleItem'
9 
 
10 
const StyledSlider = styled(Slider)`
11 
  display: grid;
6997 stevensc 12 
  column-gap: 10px;
6993 stevensc 13 
  grid-template-rows: 2rem auto;
14 
  grid-template-columns: 1fr 30px 30px;
15 
 
16 
  .slick-list {
17 
    grid-row: 2/3;
18 
    grid-column: 1/4;
19 
    padding: 1.5rem 0 0;
20 
  }
21 
  .slick-track {
22 
    display: flex;
23 
    gap: 1rem;
24 
  }
25 
`
26 
 
6996 stevensc 27 
const ArrowButton = styled(IconButton)`
28 
  border: 1px solid var(--font-color) !important;
29 
  color: var(--font-color) !important;
6995 stevensc 30 
  grid-row: 1;
6996 stevensc 31 
 
32 
  &:hover {
33 
    background-color: var(--font-color) !important;
34 
    color: var(--bg-color) !important;
35 
  }
36 
`
37 
 
38 
const StyledNextArrow = styled(ArrowButton)`
6995 stevensc 39 
  grid-column: 3;
40 
`
41 
 
6996 stevensc 42 
const StyledPrevArrow = styled(ArrowButton)`
6995 stevensc 43 
  grid-column: 2;
44 
`
45 
 
46 
const NextArrow = ({ onClick }) => {
6993 stevensc 47 
  return (
6995 stevensc 48 
    <StyledNextArrow onClick={onClick}>
6993 stevensc 49 
      <NavigateNextIcon />
6995 stevensc 50 
    </StyledNextArrow>
6993 stevensc 51 
  )
52 
}
53 
 
6995 stevensc 54 
const PrevArrow = ({ onClick }) => {
6993 stevensc 55 
  return (
6995 stevensc 56 
    <StyledPrevArrow onClick={onClick}>
6993 stevensc 57 
      <NavigateBeforeIcon />
6995 stevensc 58 
    </StyledPrevArrow>
6993 stevensc 59 
  )
60 
}
61 
 
62 
const CapsulesList = ({ capsules, onEnroll }) => {
63 
  const settings = {
64 
    infinite: true,
65 
    speed: 1500,
66 
    slidesToShow: capsules.length < 4 ? capsules.length : 4,
67 
    slidesToScroll: 1,
6995 stevensc 68 
    nextArrow: <NextArrow />,
69 
    prevArrow: <PrevArrow />,
6993 stevensc 70 
    responsive: [
71 
      {
72 
        breakpoint: 768,
73 
        settings: {
74 
          slidesToShow: 2,
75 
          slidesToScroll: 2,
76 
          initialSlide: 0,
77 
        },
78 
      },
79 
      {
80 
        breakpoint: 1024,
81 
        settings: {
82 
          slidesToShow: 3,
83 
          slidesToScroll: 3,
84 
          initialSlide: 0,
85 
        },
86 
      },
87 
    ],
88 
  }
89 
 
90 
  return (
91 
    <StyledSlider {...settings}>
92 
      {capsules.map((capsule, index) => (
93 
        <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
94 
      ))}
95 
    </StyledSlider>
96 
  )
97 
}
98 
 
99 
export default CapsulesList