ChartCopyButton() — ui Function Reference

Architecture documentation for the ChartCopyButton() function in chart-copy-button.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ChartCopyButton() — ui Function Reference

Dependency Diagram

graph TD
  da863c56_5b50_f8a2_8d1d_93cbd8e6410f["ChartCopyButton()"]
  f012c134_46ba_0dd6_64de_f7b8aca19656["chart-copy-button.tsx"]
  da863c56_5b50_f8a2_8d1d_93cbd8e6410f -->|defined in| f012c134_46ba_0dd6_64de_f7b8aca19656
  style da863c56_5b50_f8a2_8d1d_93cbd8e6410f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/chart-copy-button.tsx lines 15–63

export function ChartCopyButton({
  event,
  name,
  code,
  className,
  ...props
}: {
  event: Event["name"]
  name: string
  code: string
} & ButtonProps) {
  const [hasCopied, setHasCopied] = React.useState(false)

  React.useEffect(() => {
    setTimeout(() => {
      setHasCopied(false)
    }, 2000)
  }, [hasCopied])

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          size="icon"
          variant="outline"
          className={cn(
            "[&_svg]-h-3.5 h-7 w-7 rounded-[6px] [&_svg]:w-3.5",
            className
          )}
          onClick={() => {
            navigator.clipboard.writeText(code)
            trackEvent({
              name: event,
              properties: {
                name,
              },
            })
            setHasCopied(true)
          }}
          {...props}
        >
          <span className="sr-only">Copy</span>
          {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
        </Button>
      </TooltipTrigger>
      <TooltipContent className="bg-black text-white">Copy code</TooltipContent>
    </Tooltip>
  )
}