Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3567 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3563 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 
import { Typography } from '@mui/material';
10 
 
11 
const StyledSlider = styled(Slider)`
12 
  display: grid;
13 
  column-gap: 10px;
14 
  grid-template-rows: 2rem auto;
15 
  grid-template-columns: 1fr 30px 30px;
16 
 
17 
  .slick-list {
18 
    grid-row: 2/3;
19 
    grid-column: 1/4;
20 
    padding: 1.5rem 0 0;
21 
  }
22 
  .slick-track {
23 
    display: flex;
24 
    gap: 1rem;
25 
  }
26 
`;
27 
 
28 
const ArrowButton = styled(IconButton)`
29 
  border: 1px solid var(--font-color) !important;
30 
  color: var(--font-color) !important;
31 
  grid-row: 1;
32 
  transition: all 200ms ease;
33 
 
34 
  &:hover {
35 
    background-color: var(--font-color) !important;
36 
    color: var(--bg-color) !important;
37 
  }
38 
`;
39 
 
40 
const StyledNextArrow = styled(ArrowButton)`
41 
  grid-column: 3;
42 
`;
43 
 
44 
const StyledPrevArrow = styled(ArrowButton)`
45 
  grid-column: 2;
46 
`;
47 
 
48 
const NextArrow = ({ onClick }) => {
49 
  return (
50 
    <StyledNextArrow onClick={onClick}>
51 
      <NavigateNextIcon />
52 
    </StyledNextArrow>
53 
  );
54 
};
55 
 
56 
const PrevArrow = ({ onClick }) => {
57 
  return (
58 
    <StyledPrevArrow onClick={onClick}>
59 
      <NavigateBeforeIcon />
60 
    </StyledPrevArrow>
61 
  );
62 
};
63 
 
64 
export function CapsulesList({ capsules = [], onEnroll = () => {} }) {
65 
  const settings = {
66 
    infinite: true,
67 
    speed: 1500,
68 
    slidesToShow: capsules?.length < 4 ? capsules?.length : 4,
69 
    slidesToScroll: capsules?.length < 4 ? capsules?.length : 4,
70 
    nextArrow: <NextArrow />,
71 
    prevArrow: <PrevArrow />,
72 
    responsive: [
73 
      {
74 
        breakpoint: 768,
75 
        settings: {
76 
          slidesToShow: 2,
77 
          slidesToScroll: 2,
78 
          initialSlide: 0
79 
        }
80 
      },
81 
      {
82 
        breakpoint: 1024,
83 
        settings: {
84 
          slidesToShow: 3,
85 
          slidesToScroll: 3,
86 
          initialSlide: 0
87 
        }
88 
      }
89 
    ]
90 
  };
91 
 
92 
  if (!capsules || !capsules.length) {
93 
    return <Typography variant='h2'>No hay cápsulas disponibles</Typography>;
94 
  }
95 
 
96 
  return (
97 
    <StyledSlider {...settings}>
98 
      {capsules?.map((capsule, index) => (
99 
        <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
100 
      ))}
101 
    </StyledSlider>
102 
  );
103 
}