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

UI component library of Eureca's user and admin apps

import React from 'react';

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

import { shadows } from '../../../theme';
import { colors } from '../../../theme/colors';

import { Carousel } from '../';

import Logo from '../../../assets/images/logo-small.svg';

const avatarCarouselData = [
  {
    id: 1,
    name: 'Globo.com',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 2,
    name: 'Pepsico',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 3,
    name: 'Danone',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 4,
    name: 'McDonalds',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 5,
    name: 'Vevo',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 6,
    name: 'Globo.com',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 7,
    name: 'Pepsico',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 8,
    name: 'Danone',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 9,
    name: 'McDonalds',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 10,
    name: 'Vevo',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 11,
    name: 'Globo.com',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 12,
    name: 'Pepsico',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 13,
    name: 'Danone',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 14,
    name: 'McDonalds',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 15,
    name: 'Vevo',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 16,
    name: 'McDonalds',
    image: Logo,
    url: 'www.eureca.me',
  },
  {
    id: 17,
    name: 'Vevo',
    image: Logo,
    url: 'www.eureca.me',
  },
];

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

export function AvatarCarousel() {
  return (
    <Carousel variant="dots" variableWidth={true}>
      {avatarCarouselData.flatMap(item => (
        <Box p={2} pr={0} key={item.id}>
          <Box
            borderRadius="50%"
            style={{
              width: 96,
              height: 96,
              background: `url(${item.image}) no-repeat`,
              backgroundSize: '100% 100%',
              backgroundColor: colors.white,
              boxShadow: shadows.clientEllipse,
            }}
          />
        </Box>
      ))}
    </Carousel>
  );
}