Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/llms-txt-hub / apps/web/components/ui/copy-button.tsx |
| Date | Not specified in source |
| Repository | Janady13/llms-txt-hub |
| Revision | e0f4bf978d4df168369c7601d9c5f5ea89e84377 |
| Branch | main |
| Path or archive member | apps/web/components/ui/copy-button.tsx |
| Original SHA-256 | 4e561a196bdeddc8b7551d795a03c1801355e241b34ac7a6f41c448bf9023cdf |
| Git blob SHA | dfc19625ee9807addb0e105d59a5f8d1875110f2 |
| Reading-copy SHA-256 | 4e561a196bdeddc8b7551d795a03c1801355e241b34ac7a6f41c448bf9023cdf |
Recovered source transcript
Download complete source text ↓52 lines · 1.5 KB
'use client'
import { cn } from '@thedaviddias/design-system/lib/utils'
import { Check, Copy } from 'lucide-react'
import { useState } from 'react'
interface CopyButtonProps {
text: string
variant?: 'default' | 'terminal'
}
/**
* Renders a button that copies text to the clipboard
*/
export function CopyButton({ text, variant = 'default' }: CopyButtonProps) {
const [copied, setCopied] = useState(false)
/**
* Copies the text to the clipboard and shows a confirmation
*/
const handleCopy = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<button
type="button"
onClick={handleCopy}
className={cn(
'shrink-0 rounded-lg p-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
variant === 'terminal'
? 'border border-zinc-300 dark:border-zinc-700 bg-zinc-200 dark:bg-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-700'
: 'border border-border/50 bg-muted hover:bg-muted/80'
)}
aria-label="Copy to clipboard"
>
{copied ? (
<Check className="size-4 text-emerald-400" />
) : (
<Copy
className={cn(
'size-4',
variant === 'terminal' ? 'text-zinc-600 dark:text-zinc-400' : 'text-muted-foreground'
)}
/>
)}
</button>
)
}