30 lines
773 B
TypeScript
30 lines
773 B
TypeScript
|
"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>
|
||
|
|
);
|
||
|
|
}
|