function Demo() {
  return (
    <Flex gap="small" wrap="wrap">
      {['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].map(item => (
        <div
          key={item}
          style={{
            padding: '8px 16px',
            background: '#e6f4ff',
            border: '1px solid #91caff',
            borderRadius: 4,
          }}
        >
          {item}
        </div>
      ))}
    </Flex>
  );
}

function VerticalFlex() {
  return (
    <Flex vertical gap="small">
      <Button buttonStyle="primary">Primary</Button>
      <Button buttonStyle="dashed">Dashed</Button>
      <Button buttonStyle="link">Link</Button>
    </Flex>
  );
}

function JustifyAlign() {
  const boxStyle = {
    width: '100%',
    height: 120,
    borderRadius: 6,
    border: '1px solid #40a9ff',
  };
  const itemStyle = {
    width: 60,
    height: 40,
    backgroundColor: '#1677ff',
    borderRadius: 4,
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {['flex-start', 'center', 'flex-end', 'space-between', 'space-around'].map(justify => (
        <div key={justify}>
          <span style={{ marginBottom: 4, display: 'block', color: '#666' }}>{justify}</span>
          <Flex style={boxStyle} justify={justify} align="center">
            <div style={itemStyle} />
            <div style={itemStyle} />
            <div style={itemStyle} />
          </Flex>
        </div>
      ))}
    </div>
  );
}

import { Flex } from '@superset/components';