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

wix-style-react

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

import MediaOverlay from '..';
import Proportion from '../../Proportion';
import IconButton from '../../IconButton';
import Badge from '../../Badge';
import PopoverMenu from '../../PopoverMenu';
import Text from '../../Text';

export default () => (
  <StorybookComponents.Stack width="25%">
    <Proportion aspectRatio={1}>
      <MediaOverlay skin="gradient" media="FoodExample1.jpg">
        <MediaOverlay.Content placement="top-end" visible="hover">
          <IconButton priority="secondary" skin="inverted" size="tiny">
            <Icons.Star />
          </IconButton>
          <PopoverMenu
            triggerElement={
              <IconButton priority="secondary" skin="inverted" size="tiny">
                <Icons.More />
              </IconButton>
            }
          >
            <PopoverMenu.MenuItem text="Edit" />
            <PopoverMenu.MenuItem text="Preview" />
            <PopoverMenu.MenuItem text="Remove" skin="destructive" />
          </PopoverMenu>
        </MediaOverlay.Content>
        <MediaOverlay.Content placement="top-start" visible="always">
          <Badge skin="success">New!</Badge>
        </MediaOverlay.Content>
        <MediaOverlay.Content placement="bottom-start" visible="always">
          <Text size="small" weight="normal" light>
            Breakfast toast
          </Text>
        </MediaOverlay.Content>
      </MediaOverlay>
    </Proportion>
  </StorybookComponents.Stack>
);