Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6997 | | 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;
6998 stevensc 31 
  transition: all 200ms ease;
6996 stevensc 32 
 
33 
  &:hover {
34 
    background-color: var(--font-color) !important;
35 
    color: var(--bg-color) !important;
36 
  }
37 
`
38 
 
39 
const StyledNextArrow = styled(ArrowButton)`
6995 stevensc 40 
  grid-column: 3;
41 
`
42 
 
6996 stevensc 43 
const StyledPrevArrow = styled(ArrowButton)`
6995 stevensc 44 
  grid-column: 2;
45 
`
46 
 
47 
const NextArrow = ({ onClick }) => {
6993 stevensc 48 
  return (
6995 stevensc 49 
    <StyledNextArrow onClick={onClick}>
6993 stevensc 50 
      <NavigateNextIcon />
6995 stevensc 51 
    </StyledNextArrow>
6993 stevensc 52 
  )
53 
}
54 
 
6995 stevensc 55 
const PrevArrow = ({ onClick }) => {
6993 stevensc 56 
  return (
6995 stevensc 57 
    <StyledPrevArrow onClick={onClick}>
6993 stevensc 58 
      <NavigateBeforeIcon />
6995 stevensc 59 
    </StyledPrevArrow>
6993 stevensc 60 
  )
61 
}
62 
 
63 
const CapsulesList = ({ capsules, onEnroll }) => {
64 
  const settings = {
65 
    infinite: true,
66 
    speed: 1500,
67 
    slidesToShow: capsules.length < 4 ? capsules.length : 4,
68 
    slidesToScroll: 1,
6995 stevensc 69 
    nextArrow: <NextArrow />,
70 
    prevArrow: <PrevArrow />,
6993 stevensc 71 
    responsive: [
72 
      {
73 
        breakpoint: 768,
74 
        settings: {
75 
          slidesToShow: 2,
76 
          slidesToScroll: 2,
77 
          initialSlide: 0,
78 
        },
79 
      },
80 
      {
81 
        breakpoint: 1024,
82 
        settings: {
83 
          slidesToShow: 3,
84 
          slidesToScroll: 3,
85 
          initialSlide: 0,
86 
        },
87 
      },
88 
    ],
89 
  }
90 
 
91 
  return (
92 
    <StyledSlider {...settings}>
93 
      {capsules.map((capsule, index) => (
94 
        <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
95 
      ))}
96 
    </StyledSlider>
97 
  )
98 
}
99 
 
100 
export default CapsulesList