@hypothesis/frontend-shared/lib/pattern-library/examples/use-click-away-basic.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/examples/use-click-away-basic.tsx";
import classnames from 'classnames';
import { useRef, useState } from 'preact/hooks';
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 [clickedAway, setClickedAway] = useState(false);
  const containerRef = useRef(null);
  useClickAway(containerRef, () => setClickedAway(true));
  return _jsxDEV("div", {
    ref: containerRef,
    className: classnames('rounded-lg h-32 w-full p-2 flex items-center justify-center gap-2', {
      'bg-red-100': clickedAway,
      'bg-amber-100': !clickedAway
    }),
    children: [clickedAway ? 'You clicked outside the area' : 'Click outside this area', clickedAway && _jsxDEV(Button, {
      onClick: () => setClickedAway(false),
      children: "Reset"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 23,
      columnNumber: 9
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 14,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=use-click-away-basic.js.map