BlockCopyCodeButton() — ui Function Reference

Architecture documentation for the BlockCopyCodeButton() function in block-viewer.tsx from the ui codebase.

Function tsx Internationalization RTLLayout calls 1

Entity Profile

Internationalization→ RTLLayout→ BlockCopyCodeButton() — ui Function Reference

Dependency Diagram

graph TD
  d28b03ed_a078_cb19_66bb_89c8747602c9["BlockCopyCodeButton()"]
  c3ac54aa_58a5_8188_b5f8_014a382dcef3["block-viewer.tsx"]
  d28b03ed_a078_cb19_66bb_89c8747602c9 -->|defined in| c3ac54aa_58a5_8188_b5f8_014a382dcef3
  490f6bb9_b906_4b05_666d_dac1a32689b9["useBlockViewer()"]
  d28b03ed_a078_cb19_66bb_89c8747602c9 -->|calls| 490f6bb9_b906_4b05_666d_dac1a32689b9
  style d28b03ed_a078_cb19_66bb_89c8747602c9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/block-viewer.tsx lines 455–488

function BlockCopyCodeButton() {
  const { activeFile, item } = useBlockViewer()
  const { copyToClipboard, isCopied } = useCopyToClipboard()

  const file = React.useMemo(() => {
    return item.files?.find((file) => file.target === activeFile)
  }, [activeFile, item.files])

  const content = file?.content

  if (!content) {
    return null
  }

  return (
    <Button
      variant="ghost"
      size="icon"
      className="size-7"
      onClick={() => {
        copyToClipboard(content)
        trackEvent({
          name: "copy_block_code",
          properties: {
            name: item.name,
            file: file.path,
          },
        })
      }}
    >
      {isCopied ? <Check /> : <Clipboard />}
    </Button>
  )
}