41 lines
1 KiB
TypeScript
41 lines
1 KiB
TypeScript
'use client'
|
|
|
|
import { ButtonHTMLAttributes, useRef } from 'react'
|
|
import { Copy } from 'lucide-react'
|
|
import { cn } from '@/utils/cn'
|
|
|
|
type CopyButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
textToCopy: string
|
|
}
|
|
|
|
export function CopyButton({ textToCopy, className, ...props }: CopyButtonProps) {
|
|
const buttonRef = useRef<HTMLButtonElement | null>(null)
|
|
|
|
const handleCopy = () => {
|
|
navigator.clipboard.writeText(textToCopy)
|
|
const button = buttonRef.current
|
|
if (button) {
|
|
const original = button.innerHTML
|
|
button.innerHTML = 'Copied!'
|
|
button.disabled = true
|
|
setTimeout(() => {
|
|
button.innerHTML = original
|
|
button.disabled = false
|
|
}, 2000)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
className={cn(
|
|
'text-fg-dim hover:text-fg transition-colors js-only text-xs cursor-pointer disabled:cursor-default disabled:hover:text-fg-dim',
|
|
className,
|
|
)}
|
|
onClick={handleCopy}
|
|
ref={buttonRef}
|
|
{...props}
|
|
>
|
|
<Copy className="w-4 h-4" />
|
|
</button>
|
|
)
|
|
}
|