import React from "react";
import { Popover, PopoverBody } from "../../";

export default (
  <>
    <div className="m-5">
      <Popover reference={<span>Click me!</span>} className="w-100" placement="bottom-end">
        <PopoverBody className="p-0 my-2 popover-resources overflow-auto">
          {["test 1", "test 2", "test 3"].map(r => (
            <a
              href="#link"
              title="title"
              target="_blank"
              className="d-flex align-items-center text-decoration-none"
              key={r}
            >
              <div className="d-flex p-0 ml-3 mr-3">{r}</div>
            </a>
          ))}
        </PopoverBody>
      </Popover>
    </div>
    <div className="m-5">
      <Popover
        reference={<span>Click me!</span>}
        className="w-100"
        placement="bottom-end"
        usePortal={true}
      >
        <PopoverBody className="p-0 my-2 popover-resources overflow-auto">
          {["test 1", "test 2", "test 3"].map(r => (
            <a
              href="#link"
              title="title"
              target="_blank"
              className="d-flex align-items-center text-decoration-none"
              key={r}
            >
              <div className="d-flex p-0 ml-3 mr-3">{r}</div>
            </a>
          ))}
        </PopoverBody>
      </Popover>
    </div>
  </>
);