import React from 'react';
import ReactDOM from 'react-dom';
import SplitButton from '..';
import { Box } from '../..';

const { Item } = SplitButton;
const menu = [ 'Undo', 'Redo', 'Cut', 'Copy', 'Paste' ].map(item => (
  <Item key={item}>{item}</Item>
));

ReactDOM.render(
  <Box direction="row" spacing={20}>
    <SplitButton disabled label="Edit Document" type="normal">
      {menu}
    </SplitButton>
    <SplitButton disabled label="Edit Document" type="secondary">
      {menu}
    </SplitButton>
  </Box>,
  document.getElementById('split-button-demo-2'),
);