@hypothesis/frontend-shared/lib/pattern-library/examples/popover-basic.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/examples/popover-basic.tsx";
import { useRef, useState } from 'preact/hooks';
import { Popover } from '../../components/feedback';
import { Button } from '../../components/input';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function App() {
  const [open, setOpen] = useState(false);
  const buttonRef = useRef(null);
  return _jsxDEV("div", {
    className: "relative flex justify-center",
    children: [_jsxDEV(Button, {
      variant: "primary",
      elementRef: buttonRef,
      onClick: () => setOpen(prev => !prev),
      children: [open ? 'Close' : 'Open', " Popover"]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 12,
      columnNumber: 7
    }, this), _jsxDEV(Popover, {
      open: open,
      onClose: () => setOpen(false),
      anchorElementRef: buttonRef,
      classes: "p-2",
      children: "The content of the popover goes here"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 19,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 11,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=popover-basic.js.map