useCopy

import { Button, useCopy } from 'ferry-ui'
import { Check, Link2 } from 'lucide-react'

export default function UseCopyHero() {
  const [copied, copy] = useCopy()
  return (
    <Button icon={copied ? <Check /> : <Link2 />} onClick={() => void copy('https://example.com/invite/8f3a2c91')}>
      {copied ? 'Link copied' : 'Copy invite link'}
    </Button>
  )
}

import { Button, useCopy } from 'ferry-ui'
import { Check, Copy } from 'lucide-react'

export default function UseCopyTimeout() {
  // `copied` stays true for 4 seconds, not for 1.5 seconds.
  const [copied, copy] = useCopy({ timeout: 4000 })
  return (
    <div className="flex items-center gap-3">
      <code className="font-mono text-[13px] text-foreground">ord_2041_7c9e</code>
      <Button size="tiny" icon={copied ? <Check /> : <Copy />} onClick={() => void copy('ord_2041_7c9e')}>
        {copied ? 'Copied' : 'Copy order ID'}
      </Button>
    </div>
  )
}

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, copyText, toast } from 'ferry-ui'
import { MoreHorizontal } from 'lucide-react'

export default function UseCopyCopyText() {
  // No hook: copyText() gives the result, and this code shows its own messages.
  const copyId = async () => {
    const ok = await copyText('inv_2041')
    if (ok) toast.success('Invoice ID copied')
    else toast.error('Could not copy the invoice ID')
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" icon={<MoreHorizontal />} aria-label="Actions for INV-2041" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onSelect={() => void copyId()}>Copy invoice ID</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}