44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Copy as CopyIcon, Check as CheckIcon } from 'lucide-react';
|
|
|
|
import ToolTip from '@/components/ToolTip';
|
|
|
|
type CopyButtonProps = {
|
|
title: string;
|
|
copy: string;
|
|
};
|
|
|
|
export default function CopyButton({ title, copy }: CopyButtonProps) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(copy);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch (err) {
|
|
console.error('Failed to copy!', err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ToolTip content={copy}>
|
|
<button
|
|
onClick={handleCopy}
|
|
className="w-full py-1 px-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg flex flex-col items-start gap-1 shadow transition-all cursor-pointer"
|
|
>
|
|
<div className="flex items-center gap-2 w-full text-sm font-medium">
|
|
{`Copy ${title}`}
|
|
{copied ? (
|
|
<CheckIcon className="ml-auto" size={16} />
|
|
) : (
|
|
<CopyIcon className="ml-auto" size={16} />
|
|
)}
|
|
</div>
|
|
</button>
|
|
</ToolTip>
|
|
);
|
|
}
|