svrjs-nextjs-website/components/shared/copyButton.tsx

30 lines
773 B
TypeScript
Raw Normal View History

2024-08-26 17:26:02 +02:00
"use client"; // This directive indicates that the component is client-side
import { useState } from "react";
import { Button } from "../ui/button";
import { Check, Copy } from "lucide-react";
export default function CopyButton({ code }: { code: string }) {
const [copied, setCopied] = useState(false);
const copyCode = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (error) {
console.error("Failed to copy!", error);
}
};
return (
<Button
onClick={copyCode}
className="absolute top-2 right-2 bg-accent hover:bg-muted text-white p-2 rounded"
size={"icon"}
>
{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
</Button>
);
}