@eureca/eureca-ui/src/components/Carousel/stories/basic-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 '../';

const photoCarouselData = [
  {
    id: 1,
    title: 'Novartis',
    url: 'www.eureca.me',
    image:
      'https://eureca-production.s3.amazonaws.com/oportunidades/160/bvp0r6OIG0MwGlDTmRoCyMaFCTPVea.png',
  },
  {
    id: 2,
    title: '3M',
    url: 'www.eureca.me',
    image:
      'https://eureca-production.s3.amazonaws.com/oportunidades/153/uI4a8rBbm2Ayiye5p5gOVv1mZoBUlA.jpg',
  },
  {
    id: 3,
    title: 'Dasa',
    url: 'www.eureca.me',
    image:
      'https://eureca-production.s3.amazonaws.com/oportunidades/156/m8Nmb1jBkRRkITz4hdgNNnBwScUIXw.jpg',
  },
];

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

export function BasicCarousel() {
  return (
    <Carousel>
      {photoCarouselData.flatMap(item => (
        <div key={item.id}>
          <Box
            width={1}
            height="304px"
            style={{
              background: `url(${item.image}) no-repeat`,
              backgroundSize: 'cover',
              cursor: 'pointer',
            }}
          />
        </div>
      ))}
    </Carousel>
  );
}