First public commit

components/popover.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { usePopper } from "react-popper";
+import { Popover as HeadlessPopover } from "@headlessui/react";
+import clsx from "clsx";
+import ReactDOM from "react-dom";
+import { Placement } from "@popperjs/core";
+
+interface PopoverProps {
+  trigger: React.ReactNode;
+  children?: React.ReactNode;
+  placement?: Placement;
+}
+const Popover: React.VoidFunctionComponent<PopoverProps> = ({
+  children,
+  trigger,
+  placement,
+}) => {
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement,
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 5],
+        },
+      },
+    ],
+  });
+
+  const portal = document.getElementById("portal");
+  return (
+    <HeadlessPopover>
+      <HeadlessPopover.Button
+        ref={setReferenceElement}
+        as="div"
+        className={clsx("inline-block")}
+      >
+        {trigger}
+      </HeadlessPopover.Button>
+      {portal &&
+        ReactDOM.createPortal(
+          <HeadlessPopover.Panel
+            className="shadow-md bg-white rounded-lg max-w-full border p-4"
+            style={styles.popper}
+            {...attributes.popper}
+            ref={setPopperElement}
+          >
+            {children}
+          </HeadlessPopover.Panel>,
+          portal,
+        )}
+    </HeadlessPopover>
+  );
+};
+
+export default Popover;