@trellixio/roaster-coffee/esm/components/Visualizer/Visualizer.js

Beans' product component library

import * as React from 'react';
import { classNames } from '../../utils/classNames/index.js';
import '@floating-ui/react';
import { Button } from '../Button/Button.js';
import { VisualizerMobileOpener } from './VisualizerMobileOpener.js';
import { VisualizerProvider } from './Visualizer.context.js';

const Visualizer = React.forwardRef(({ className, children, title }, ref) => {
  const [visible, setVisible] = React.useState(false);
  return /* @__PURE__ */ React.createElement(
    VisualizerProvider,
    {
      value: { open: visible, onOpen: () => setVisible(true), onClose: () => setVisible(false), title }
    },
    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("section", { className: classNames("visualizer-container", { visible }, className), ref }, /* @__PURE__ */ React.createElement("div", { className: "background-overlay", onClick: () => setVisible(!visible) }), /* @__PURE__ */ React.createElement("aside", { className: "visualizer visualizer-background" }, /* @__PURE__ */ React.createElement("div", { className: "title-wrapper" }, /* @__PURE__ */ React.createElement("h4", null, title), /* @__PURE__ */ React.createElement(Button, { isIconButton: true, variant: "secondary", className: "close-visualizer", onClick: () => setVisible(false) }, /* @__PURE__ */ React.createElement("i", { className: "fa-regular fa-xmark" }))), /* @__PURE__ */ React.createElement("div", { className: "visualizer-content-wrapper" }, children))), /* @__PURE__ */ React.createElement(VisualizerMobileOpener, null))
  );
});
Visualizer.displayName = "Visualizer";

export { Visualizer };
//# sourceMappingURL=Visualizer.js.map