Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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