You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
filepizza/src/components/CopyableIcon.tsx

20 lines
590 B
TypeScript

import React, { JSX } from 'react'
import { ClipboardIcon } from '@heroicons/react/24/outline'
import useClipboard from '../hooks/useClipboard'
export function CopyableIcon({ value }: { value: string }): JSX.Element {
const { hasCopied, onCopy } = useClipboard(value)
return (
<div className="relative flex items-center">
<ClipboardIcon
onClick={onCopy}
className="w-6 h-6 text-gray-500 cursor-pointer hover:text-gray-600"
/>
{hasCopied && (
<span className="absolute ml-8 text-sm text-green-500">Copied!</span>
)}
</div>
)
}