Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6993 | 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;
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 
 
6995 stevensc 49 
const StyledNextArrow = styled(IconButton)`
50 
  border: 1px solid var(--font-color);
51 
  grid-row: 1;
52 
  grid-column: 3;
53 
`
54 
 
55 
const StyledPrevArrow = styled(IconButton)`
56 
  border: 1px solid var(--font-color);
57 
  grid-row: 1;
58 
  grid-column: 2;
59 
`
60 
 
61 
const NextArrow = ({ onClick }) => {
6993 stevensc 62 
  return (
6995 stevensc 63 
    <StyledNextArrow onClick={onClick}>
6993 stevensc 64 
      <NavigateNextIcon />
6995 stevensc 65 
    </StyledNextArrow>
6993 stevensc 66 
  )
67 
}
68 
 
6995 stevensc 69 
const PrevArrow = ({ onClick }) => {
6993 stevensc 70 
  return (
6995 stevensc 71 
    <StyledPrevArrow onClick={onClick}>
6993 stevensc 72 
      <NavigateBeforeIcon />
6995 stevensc 73 
    </StyledPrevArrow>
6993 stevensc 74 
  )
75 
}
76 
 
77 
const CapsulesList = ({ capsules, onEnroll }) => {
78 
  const settings = {
79 
    infinite: true,
80 
    speed: 1500,
81 
    slidesToShow: capsules.length < 4 ? capsules.length : 4,
82 
    slidesToScroll: 1,
6995 stevensc 83 
    nextArrow: <NextArrow />,
84 
    prevArrow: <PrevArrow />,
6993 stevensc 85 
    responsive: [
86 
      {
87 
        breakpoint: 768,
88 
        settings: {
89 
          slidesToShow: 2,
90 
          slidesToScroll: 2,
91 
          initialSlide: 0,
92 
        },
93 
      },
94 
      {
95 
        breakpoint: 1024,
96 
        settings: {
97 
          slidesToShow: 3,
98 
          slidesToScroll: 3,
99 
          initialSlide: 0,
100 
        },
101 
      },
102 
    ],
103 
  }
104 
 
105 
  return (
106 
    <StyledSlider {...settings}>
107 
      {capsules.map((capsule, index) => (
108 
        <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
109 
      ))}
110 
    </StyledSlider>
111 
  )
112 
}
113 
 
114 
export default CapsulesList