CopyWithClassNames() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ CopyWithClassNames() — ui Function Reference

Dependency Diagram

graph TD
  4586c846_46c8_b5f5_983c_f1c4c9f97eb7["CopyWithClassNames()"]
  40c3b834_cac9_e0e3_2ccf_6a31f24f5b75["copy-button.tsx"]
  4586c846_46c8_b5f5_983c_f1c4c9f97eb7 -->|defined in| 40c3b834_cac9_e0e3_2ccf_6a31f24f5b75
  950171c6_2456_bafd_9876_2b64c35e4630["copyToClipboardWithMeta()"]
  4586c846_46c8_b5f5_983c_f1c4c9f97eb7 -->|calls| 950171c6_2456_bafd_9876_2b64c35e4630
  style 4586c846_46c8_b5f5_983c_f1c4c9f97eb7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/copy-button.tsx lines 83–131

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="icon"
          variant="ghost"
          className={cn(
            "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
            className
          )}
        >
          {hasCopied ? (
            <CheckIcon className="h-3 w-3" />
          ) : (
            <ClipboardIcon 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>
  )
}