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

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.

import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useRef, useEffect, useCallback } from 'react';
import '../../icons/index.js';
import { useOverrides } from '../../overrides.js';
import { Button } from './Button.js';
import { Tooltip } from './Tooltip.js';
import { TooltipProvider } from '@radix-ui/react-tooltip';
import { CheckIcon } from '../../icons/Check.js';
import { CopyIcon } from '../../icons/Copy.js';

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

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