Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6995 | Ir a la última revisión | | 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;
12 
  grid-template-rows: 2rem auto;
13 
  grid-template-columns: 1fr 30px 30px;
14 
 
15 
  .slick-prev,
16 
  .slick-next {
17 
    position: relative;
18 
    border: 1px solid var(--font-color);
19 
    border-radius: 50%;
20 
    height: 28px;
21 
    left: auto;
22 
    top: 1rem;
23 
    right: auto;
24 
    width: 28px;
25 
    color: var(--font-color);
26 
    &::before {
27 
      content: none !important;
28 
    }
29 
  }
30 
  .slick-list {
31 
    grid-row: 2/3;
32 
    grid-column: 1/4;
33 
    padding: 1.5rem 0 0;
34 
  }
35 
  .slick-track {
36 
    display: flex;
37 
    gap: 1rem;
38 
  }
39 
  .slick-prev {
40 
    grid-row: 1;
41 
    grid-column: 2/3;
42 
  }
43 
  .slick-next {
44 
    grid-row: 1;
45 
    grid-column: 3/4;
46 
  }
47 
`
48 
 
49 
const SampleNextArrow = ({ onClick }) => {
50 
  return (
51 
    <IconButton onClick={onClick}>
52 
      <NavigateNextIcon />
53 
    </IconButton>
54 
  )
55 
}
56 
 
57 
const SamplePrevArrow = ({ onClick }) => {
58 
  return (
59 
    <IconButton onClick={onClick}>
60 
      <NavigateBeforeIcon />
61 
    </IconButton>
62 
  )
63 
}
64 
 
65 
const CapsulesList = ({ capsules, onEnroll }) => {
66 
  const settings = {
67 
    infinite: true,
68 
    speed: 1500,
69 
    slidesToShow: capsules.length < 4 ? capsules.length : 4,
70 
    slidesToScroll: 1,
71 
    nextArrow: <SampleNextArrow />,
72 
    prevArrow: <SamplePrevArrow />,
73 
    responsive: [
74 
      {
75 
        breakpoint: 768,
76 
        settings: {
77 
          slidesToShow: 2,
78 
          slidesToScroll: 2,
79 
          initialSlide: 0,
80 
        },
81 
      },
82 
      {
83 
        breakpoint: 1024,
84 
        settings: {
85 
          slidesToShow: 3,
86 
          slidesToScroll: 3,
87 
          initialSlide: 0,
88 
        },
89 
      },
90 
    ],
91 
  }
92 
 
93 
  return (
94 
    <StyledSlider {...settings}>
95 
      {capsules.map((capsule, index) => (
96 
        <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
97 
      ))}
98 
    </StyledSlider>
99 
  )
100 
}
101 
 
102 
export default CapsulesList