@liveblocks/react-ui/dist/components/internal/CodeBlock.cjs

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
require('../../icons/index.cjs');
var overrides = require('../../overrides.cjs');
var Button = require('./Button.cjs');
var Tooltip = require('./Tooltip.cjs');
var TooltipPrimitive = require('@radix-ui/react-tooltip');
var Check = require('../../icons/Check.cjs');
var Copy = require('../../icons/Copy.cjs');

const COPY_DELAY = 1500;
function CodeBlock({ title, code, overrides: overrides$1 }) {
  const $ = overrides.useOverrides(overrides$1);
  const [isCopied, setCopied] = react.useState(false);
  const timeoutRef = react.useRef(null);
  react.useEffect(() => {
    if (isCopied) {
      timeoutRef.current = setTimeout(() => {
        setCopied(false);
      }, COPY_DELAY);
    }
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [isCopied]);
  const handleCopy = react.useCallback(() => {
    try {
      navigator.clipboard.writeText(code);
      setCopied(true);
    } catch (error) {
      console.error(error);
    }
  }, [code]);
  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
      className: "lb-code-block",
      children: [
        /* @__PURE__ */ jsxRuntime.jsxs("div", {
          className: "lb-code-block-header",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx("span", {
              className: "lb-code-block-title",
              children: title
            }),
            /* @__PURE__ */ jsxRuntime.jsx("div", {
              className: "lb-code-block-header-actions",
              children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
                content: isCopied ? null : $.COPY_TO_CLIPBOARD,
                children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
                  className: "lb-code-block-header-action",
                  icon: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(Copy.CopyIcon, {}),
                  onClick: handleCopy,
                  "aria-label": $.COPY_TO_CLIPBOARD
                })
              })
            })
          ]
        }),
        /* @__PURE__ */ jsxRuntime.jsx("pre", {
          className: "lb-code-block-content",
          children: /* @__PURE__ */ jsxRuntime.jsx("code", {
            children: code
          })
        })
      ]
    })
  });
}

exports.CodeBlock = CodeBlock;
//# sourceMappingURL=CodeBlock.cjs.map