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

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/examples/popover-custom.tsx";
import { useRef, useState } from 'preact/hooks';
import { Popover } from '../../components/feedback';
import { Button } from '../../components/input';
import { useClickAway } from '../../hooks/use-click-away';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function App() {
  const [open, setOpen] = useState(false);
  const buttonRef = useRef(null);
  useClickAway(buttonRef, () => setOpen(false));
  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: 15,
      columnNumber: 7
    }, this), _jsxDEV(Popover, {
      open: open,
      onClose: () => setOpen(false),
      anchorElementRef: buttonRef,
      variant: "custom",
      classes: "p-3 border-4 border-slate-7 bg-green-success text-white font-bold rounded-tr-lg rounded-bl-lg",
      children: "This popover has been customized"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 22,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 14,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=popover-custom.js.map