@eureca/eureca-ui/src/components/Carousel/stories/cards-carousel.stories.js

UI component library of Eureca's user and admin apps

import React from 'react';

import { Box } from '@material-ui/core';

import { Carousel } from '../';
import { JourneyCard } from '../../Cards';

const cardsCarouselData = [
  { title: 'Presencial', date: new Date(20, 10, 5), text: 'Abertura das inscrições' },
  { title: 'Online', date: new Date(), text: 'Fechamento das inscrições' },
  { title: 'Online', date: new Date(), text: 'Inscrições' },
  { title: 'Geral', date: new Date(20, 10, 5), text: 'Abertura das inscrições' },
  { title: 'Online', date: new Date(), text: 'Fechamento das inscrições' },
  { title: 'Online', date: new Date(), text: 'Inscrições' },
  { title: 'Geral', date: new Date(20, 10, 5), text: 'Abertura das inscrições' },
  { title: 'Online', date: new Date(), text: 'Fechamento das inscrições' },
  { title: 'Online', date: new Date(), text: 'Inscrições' },
  { title: 'Geral', date: new Date(20, 10, 5), text: 'Abertura das inscrições' },
];

export default { title: 'Originals/Carousel', includeStories: [] };

export function CardsCarousel() {
  return (
    <Box width={600}>
      <Carousel variant="dots" variableWidth={true}>
        {cardsCarouselData.flatMap((data, index) => (
          <Box p={2} pr={0} key={index}>
            <JourneyCard {...data} />
          </Box>
        ))}
      </Carousel>
    </Box>
  );
}