@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-root 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