svrjs-nextjs-website/components/shared/copyButton.tsx
Dorian Niemiec f25ad2d6a7
Some checks failed
Deploy Next.js application / deploy (push) Failing after 10m3s
fix: make the copy icon in the copy button for code blocks visible
2024-09-22 07:28:42 +02:00

29 lines
768 B
TypeScript

"use client";
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-black dark:text-white p-2 rounded"
size={"icon"}
>
{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
</Button>
);
}