wix-style-react/src/MediaOverlay/docs/examples/content.js

wix-style-react

import React from 'react';

import Box from '../../../Box';
import FillPreview from '../../../FillPreview';
import MediaOverlay from '../..';

export const dragHandle = [
  <MediaOverlay.Content key="dragHandle" visible="hover">
    <MediaOverlay.DragHandle />
  </MediaOverlay.Content>,
];

const renderExampleContent = (placement, visible, fill = ['lime', 'lime']) => (
  <MediaOverlay.Content
    key={`${visible}-${placement}`}
    placement={placement}
    visible={visible}
  >
    {fill.map((fillContent, index) => (
      <Box key={index} width="24px">
        <FillPreview key={index} fill={fillContent} />
      </Box>
    ))}
  </MediaOverlay.Content>
);

export const allPlacements = [
  renderExampleContent('top-start', 'always'),
  renderExampleContent('top-end', 'always'),
  renderExampleContent('middle', 'always'),
  renderExampleContent('bottom-start', 'always'),
  renderExampleContent('bottom-end', 'always'),
];

export const topHoverMiddleAlwaysBottomDefault = [
  renderExampleContent('top-start', 'hover'),
  renderExampleContent('top-end', 'hover'),
  renderExampleContent('middle', 'always'),
  renderExampleContent('bottom-start', 'default'),
  renderExampleContent('bottom-end', 'default'),
];

export const numberedPlacements = [
  renderExampleContent('top-start', 'always', [<>0</>, <>1</>]),
  renderExampleContent('top-end', 'always', [<>2</>, <>3</>]),
  renderExampleContent('middle', 'always', [<>4</>, <>5</>]),
  renderExampleContent('bottom-start', 'always', [<>6</>, <>7</>]),
  renderExampleContent('bottom-end', 'always', [<>8</>, <>9</>]),
];