@trellixio/roaster-coffee
Version:
Beans' product component library
23 lines (22 loc) • 1.66 kB
JavaScript
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import * as React from 'react';
import { classNames } from '@/utils';
import { Button } from '../Button';
import { VisualizerMobileOpener } from './VisualizerMobileOpener';
import { VisualizerProvider } from './Visualizer.context';
export const Visualizer = React.forwardRef(({ className, children, title }, ref) => {
const [visible, setVisible] = React.useState(false);
return (React.createElement(VisualizerProvider, { value: { open: visible, onOpen: () => setVisible(true), onClose: () => setVisible(false), title } },
React.createElement(React.Fragment, null,
React.createElement("section", { className: classNames('visualizer-container', { visible }, className), ref: ref },
React.createElement("div", { className: "background-overlay", onClick: () => setVisible(!visible) }),
React.createElement("aside", { className: "visualizer visualizer-background" },
React.createElement("div", { className: "title-wrapper" },
React.createElement("h4", null, title),
React.createElement(Button, { isIconButton: true, variant: "secondary", className: "close-visualizer", onClick: () => setVisible(false) },
React.createElement("i", { className: "fa-regular fa-xmark" }))),
React.createElement("div", { className: "visualizer-content-wrapper" }, children))),
React.createElement(VisualizerMobileOpener, null))));
});
Visualizer.displayName = 'Visualizer';