rbtc-faucet/src/components/Carousel.tsx at 30716dbfece6347765ce065829e06f2e79360296 · rsksmart/rbtc-faucet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
'use client';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/pagination';
import RskLinkCard from './rsk-link-card';
import WalleIcon from '@/assets/images/wallet-icon.svg';
import TutorialIcon from '@/assets/images/tutorial-icon.svg';
import DevportalIcon from '@/assets/images/devportal-icon.svg';

interface ICarousel {
  title: string;
  description: string;
  link: string;
  img: string;
  backgroundColor: string;
}

const Carousel = () => {
  const items: ICarousel[] = [
    {
      link: 'https://developers.rsk.co/develop/apps/wallets/',
      img: WalleIcon.src,
      title: 'Wallets',
      backgroundColor: 'black',
      description: 'Try Rootstock with these wallets',
    },
    {
      link: 'https://developers.rsk.co/tutorials/',
      img: TutorialIcon.src,
      title: 'Tutorials',
      backgroundColor: '#f26122',
      description: 'Read and learn about how to develop Dapps on Rootstock',
    },
    {
      link: 'https://developers.rsk.co/',
      img: DevportalIcon.src,
      title: 'DevPortal',
      backgroundColor: '#00b41f',
      description: 'For developers by developers',
    },
  ];

  return (
    <div className="content-carousel">
      <Swiper
        modules={[Autoplay, Pagination]}
        autoplay={{ delay: 5000, disableOnInteraction: false }}
        pagination={{ clickable: true }}

        breakpoints={{
          480: {
            slidesPerView: 1.1,
            spaceBetween: 5,
          },
          768: {
            slidesPerView: 1.15,
            spaceBetween: 10,
          },
          1024: {
            slidesPerView: 1.3,
            spaceBetween: 15,
          },
          1440: {
            slidesPerView: 1.5,
            spaceBetween: 20,
          },
          1920: {
            slidesPerView: 1.8,
            spaceBetween: 20,
          },
          2560: {
            slidesPerView: 2,
            spaceBetween: 40,
          }
        }}
      >
        {items.map((item, i) => (
          <SwiperSlide key={i}>
            <RskLinkCard {...item} />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default Carousel;