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