CopyWithClassNames() — supabase Function Reference

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

Function tsx DesignSystem ComponentRegistry calls 1

Entity Profile

DesignSystem→ ComponentRegistry→ CopyWithClassNames() — supabase Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/design-system/components/copy-button.tsx lines 85–125

export function CopyWithClassNames({
  value,
  classNames,
  className,
  ...props
}: CopyWithClassNamesProps) {
  const [hasCopied, setHasCopied] = React.useState(false)

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

  const copyToClipboard = React.useCallback((value: string) => {
    copyToClipboardWithMeta(value)
    setHasCopied(true)
  }, [])

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          size="small"
          type="outline"
          className={cn(
            'relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50',
            className
          )}
        >
          {hasCopied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
          <span className="sr-only">Copy</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => copyToClipboard(value)}>Component</DropdownMenuItem>
        <DropdownMenuItem onClick={() => copyToClipboard(classNames)}>Classname</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}