BlockCopyCodeButton() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ BlockCopyCodeButton() — ui Function Reference

Dependency Diagram

graph TD
  c88a05c5_1645_7551_a3ec_d08595d213a9["BlockCopyCodeButton()"]
  1286b7b7_c8bd_53b6_a231_a71e5b6ebd50["block-viewer.tsx"]
  c88a05c5_1645_7551_a3ec_d08595d213a9 -->|defined in| 1286b7b7_c8bd_53b6_a231_a71e5b6ebd50
  83e47c77_6e8f_02ce_db45_c9629b80fe41["useBlockViewer()"]
  c88a05c5_1645_7551_a3ec_d08595d213a9 -->|calls| 83e47c77_6e8f_02ce_db45_c9629b80fe41
  style c88a05c5_1645_7551_a3ec_d08595d213a9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/block-viewer.tsx lines 400–432

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
      onClick={() => {
        copyToClipboard(content)
        trackEvent({
          name: "copy_block_code",
          properties: {
            name: item.name,
            file: file.path,
          },
        })
      }}
      className="h-7 w-7 shrink-0 rounded-lg p-0 hover:bg-zinc-700 hover:text-white focus:bg-zinc-700 focus:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white [&>svg]:size-3"
      variant="ghost"
    >
      {isCopied ? <Check /> : <Clipboard />}
    </Button>
  )
}