CopyButton() — supabase Function Reference

Architecture documentation for the CopyButton() function in copy-button.tsx from the supabase codebase.

Function tsx DesignSystem ThemeEngine calls 1

Entity Profile

DesignSystem→ ThemeEngine→ CopyButton() — supabase Function Reference

Dependency Diagram

graph TD
  1b4bc1ea_c480_a1e8_cabe_b4eaec1845ec["CopyButton()"]
  763e0c42_f597_2c8d_83ba_d5bae9292e71["copyToClipboardWithMeta()"]
  1b4bc1ea_c480_a1e8_cabe_b4eaec1845ec -->|calls| 763e0c42_f597_2c8d_83ba_d5bae9292e71
  style 1b4bc1ea_c480_a1e8_cabe_b4eaec1845ec fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/components/copy-button.tsx lines 34–77

export function CopyButton({
  value,
  className,
  src,
  // event,
  ...props
}: CopyButtonProps) {
  const [hasCopied, setHasCopied] = React.useState(false)

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

  return (
    <Button
      size="small"
      type="outline"
      className={cn(
        'relative z-10 h-6 w-6 text-foreground-muted hover:bg-surface-100 hover:text-foreground p-0',
        className
      )}
      onClick={() => {
        copyToClipboardWithMeta(
          value
          //   event
          //     ? {
          //         name: event,
          //         properties: {
          //           code: value,
          //         },
          //       }
          //     : undefined
        )
        setHasCopied(true)
      }}
      {...props}
    >
      <span className="sr-only">Copy</span>
      {hasCopied ? <Check className="h-3 w-3 text-brand-600" /> : <Copy className="h-3 w-3" />}
    </Button>
  )
}