@liveblocks/react-ui
Version:
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.
1 lines • 3.99 kB
Source Map (JSON)
{"version":3,"file":"CodeBlock.cjs","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n title: string;\n code: string;\n overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n const $ = useOverrides(overrides);\n const [isCopied, setCopied] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (isCopied) {\n timeoutRef.current = setTimeout(() => {\n setCopied(false);\n }, COPY_DELAY);\n }\n\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [isCopied]);\n\n const handleCopy = useCallback(() => {\n try {\n navigator.clipboard.writeText(code);\n setCopied(true);\n } catch (error) {\n console.error(error);\n }\n }, [code]);\n\n return (\n <TooltipProvider>\n <div className=\"lb-root lb-code-block\">\n <div className=\"lb-code-block-header\">\n <span className=\"lb-code-block-title\">{title}</span>\n <div className=\"lb-code-block-header-actions\">\n <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n <Button\n className=\"lb-code-block-header-action\"\n icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n onClick={handleCopy}\n aria-label={$.COPY_TO_CLIPBOARD}\n />\n </Tooltip>\n </div>\n </div>\n <pre className=\"lb-code-block-content\">\n <code>{code}</code>\n </pre>\n </div>\n </TooltipProvider>\n );\n}\n"],"names":["overrides","useOverrides","useState","useRef","useEffect","useCallback","jsx","TooltipProvider","jsxs","Tooltip","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;;;;;;;AASA,MAAM,UAAa,GAAA,IAAA,CAAA;AAQZ,SAAS,SAAU,CAAA,EAAE,KAAO,EAAA,IAAA,aAAMA,aAA6B,EAAA;AACpE,EAAM,MAAA,CAAA,GAAIC,uBAAaD,WAAS,CAAA,CAAA;AAChC,EAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAIE,eAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAaC,aAA6C,IAAI,CAAA,CAAA;AAEpE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACd,UAAU,CAAA,CAAA;AAAA,KACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,UAAA,GAAaC,kBAAY,MAAM;AACnC,IAAI,IAAA;AACF,MAAU,SAAA,CAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,aACP,KAAO,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBACGC,cAAA,CAAAC,gCAAA,EAAA,EACC,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,uBACb,EAAA,QAAA,EAAA;AAAA,oBAACA,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,sBACb,EAAA,QAAA,EAAA;AAAA,sBAACF,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,qBAAA,EAAuB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAC7CA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,8BACb,EAAA,QAAA,kBAAAA,cAAA,CAACG,mBAAQ,OAAS,EAAA,QAAA,GAAW,IAAO,GAAA,CAAA,CAAE,iBACpC,EAAA,QAAA,kBAAAH,cAAA;AAAA,QAACI,aAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,6BAAA;AAAA,UACV,MAAM,QAAW,mBAAAJ,cAAA,CAACK,eAAU,EAAA,EAAA,CAAA,kCAAMC,aAAS,EAAA,EAAA,CAAA;AAAA,UAC3C,OAAS,EAAA,UAAA;AAAA,UACT,cAAY,CAAE,CAAA,iBAAA;AAAA,SAAA;AAAA,SAElB,CACF,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,mCACC,KAAI,EAAA,EAAA,SAAA,EAAU,yBACb,QAAC,kBAAAN,cAAA,CAAA,MAAA,EAAA,EAAM,gBAAK,CACd,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}