ChartCopyButton() — ui Function Reference

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

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ ChartCopyButton() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/components/chart-copy-button.tsx lines 15–63

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

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

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          size="icon"
          variant="ghost"
          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 ? <IconCheck /> : <IconCopy />}
        </Button>
      </TooltipTrigger>
      <TooltipContent className="bg-black text-white">Copy code</TooltipContent>
    </Tooltip>
  )
}