Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3568 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 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 
import { Typography } from '@mui/material';
8 
import { CapsuleItem } from './CapsuleItem';
9 
 
10 
const StyledSlider = styled(Slider)`
11 
  display: grid;
12 
  column-gap: 10px;
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 
 
27 
const ArrowButton = styled(IconButton)`
28 
  border: 1px solid var(--font-color) !important;
29 
  color: var(--font-color) !important;
30 
  grid-row: 1;
31 
  transition: all 200ms ease;
32 
 
33 
  &:hover {
34 
    background-color: var(--font-color) !important;
35 
    color: var(--bg-color) !important;
36 
  }
37 
`;
38 
 
39 
const StyledNextArrow = styled(ArrowButton)`
40 
  grid-column: 3;
41 
`;
42 
 
43 
const StyledPrevArrow = styled(ArrowButton)`
44 
  grid-column: 2;
45 
`;
46 
 
47 
const NextArrow = ({ onClick }) => {
48 
  return (
49 
    <StyledNextArrow onClick={onClick}>
50 
      <NavigateNextIcon />
51 
    </StyledNextArrow>
52 
  );
53 
};
54 
 
55 
const PrevArrow = ({ onClick }) => {
56 
  return (
57 
    <StyledPrevArrow onClick={onClick}>
58 
      <NavigateBeforeIcon />
59 
    </StyledPrevArrow>
60 
  );
61 
};
62 
 
63 
export function CapsulesList({ capsules = [], onEnroll = () => {} }) {
64 
  const settings = {
65 
    infinite: true,
66 
    speed: 1500,
67 
    slidesToShow: capsules?.length < 4 ? capsules?.length : 4,
68 
    slidesToScroll: capsules?.length < 4 ? capsules?.length : 4,
69 
    nextArrow: <NextArrow />,
70 
    prevArrow: <PrevArrow />,
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 
  if (!capsules || !capsules.length) {
92 
    return <Typography>No hay cápsulas disponibles</Typography>;
93 
  }
94 
 
95 
  return (
96 
    <StyledSlider {...settings}>
97 
      {capsules?.map((capsule, index) => (
98 
        <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
99 
      ))}
100 
    </StyledSlider>
101 
  );
102 
}