wix-style-react/src/CardGalleryItem/docs/CardGalleryItem.demo.js

wix-style-react

import React from 'react';
import CardGalleryItem from '..';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';
import Badge from '../../Badge';
import PopoverMenu from '../../PopoverMenu';
import IconButton from '../../IconButton';
import * as Icons from 'wix-ui-icons-common';

export default () => (
  <StorybookComponents.Stack>
    <CardGalleryItem
      backgroundImageUrl="TravelExample7.jpg"
      primaryActionProps={{
        label: 'Edit post',
      }}
      badge={<Badge skin="standard">New</Badge>}
      title="Arriving to New Zealand"
      subtitle="Jan 30, 2021 (05:30 PM)"
      settingsMenu={
        <PopoverMenu
          triggerElement={({ toggle, close }) => (
            <IconButton
              onClick={toggle}
              onMouseLeave={close}
              skin="light"
              size="small"
              priority="secondary"
            >
              <Icons.More />
            </IconButton>
          )}
        >
          <PopoverMenu.MenuItem text="Edit" prefixIcon={<Icons.Edit />} />
          <PopoverMenu.MenuItem text="Share" prefixIcon={<Icons.Share />} />
          <PopoverMenu.MenuItem
            text="Delete"
            skin="destructive"
            prefixIcon={<Icons.Delete />}
          />
        </PopoverMenu>
      }
    />
    <CardGalleryItem
      backgroundImageUrl="TravelExample8.jpg"
      primaryActionProps={{
        label: 'Edit post',
      }}
      title="Top 10 Weekend Getaway Destinations"
      subtitle="Dec 12, 2020 (02:00 AM)"
      settingsMenu={
        <PopoverMenu
          triggerElement={({ toggle, close }) => (
            <IconButton
              onClick={toggle}
              onMouseLeave={close}
              skin="light"
              size="small"
              priority="secondary"
            >
              <Icons.More />
            </IconButton>
          )}
        >
          <PopoverMenu.MenuItem text="Edit" prefixIcon={<Icons.Edit />} />
          <PopoverMenu.MenuItem text="Share" prefixIcon={<Icons.Share />} />
          <PopoverMenu.MenuItem
            text="Delete"
            skin="destructive"
            prefixIcon={<Icons.Delete />}
          />
        </PopoverMenu>
      }
    />
    <CardGalleryItem
      backgroundImageUrl="TravelExample9.jpg"
      primaryActionProps={{
        label: 'Edit post',
      }}
      title="Discovering Thailand"
      subtitle="Dec 02, 2020 (08:00 PM)"
      settingsMenu={
        <PopoverMenu
          triggerElement={({ toggle, close }) => (
            <IconButton
              onClick={toggle}
              onMouseLeave={close}
              skin="light"
              size="small"
              priority="secondary"
            >
              <Icons.More />
            </IconButton>
          )}
        >
          <PopoverMenu.MenuItem text="Edit" prefixIcon={<Icons.Edit />} />
          <PopoverMenu.MenuItem text="Share" prefixIcon={<Icons.Share />} />
          <PopoverMenu.MenuItem
            text="Delete"
            skin="destructive"
            prefixIcon={<Icons.Delete />}
          />
        </PopoverMenu>
      }
    />
  </StorybookComponents.Stack>
);