import * as React from 'react';
import { Col, Popover, Button, Row } from '@btri-ui/base';
import { TooltipPlacement } from 'antd/lib/tooltip';

const Base = () => {
  const direction: TooltipPlacement[] = [
    'top',
    'left',
    'right',
    'bottom',
    'topLeft',
    'topRight',
    'bottomLeft',
    'bottomRight',
    'leftTop',
    'leftBottom',
    'rightTop',
    'rightBottom',
  ];
  const content = <div>content</div>;
  return (
    <>
      <Row autoMode={true}>
        {direction.map(dir => (
          <Col span={3}>
            <Popover content={content} title="Title" placement={dir}>
              <Button>{dir}</Button>
            </Popover>
          </Col>
        ))}
      </Row>
    </>
  );
};

export default Base;