"use client";
import { useEffect, useRef, useState } from "react";
import { useCopyToClipboard } from "@uidotdev/usehooks";
import { Copy } from "lucide-react";
export default function CopyToClipboard() {
const ref = useRef();
const [, copyToClipboard] = useCopyToClipboard();
const [copiedText, setCopiedText] = useState("");
useEffect(() => {
let mounted = true;
if (copiedText) {
setTimeout(() => {
if (mounted) setCopiedText("");
}, 1000);
}
return () => {
mounted = false;
};
}, [copiedText]);
return (
<button
ref={ref}
onClick={() => {
const code = ref.current.parentElement.querySelector("code");
const text =
code.classList.contains("language-sh") && code.textContent.split("\n")
? code.textContent
.split("\n")
.filter((line) => line.trim())
.join(" \\\n")
.trim()
: code.textContent;
setCopiedText(text);
copyToClipboard(text);
}}
className="absolute top-2 right-2"
aria-label="Copy to clipboard"
>
<Copy size={24} className="stroke-white" />
{copiedText && (
<div className="absolute p-1 text-xs text-white bg-black rounded-md top-0 right-0 fade-out">
Copied!
</div>
)}
</button>
);
}