copy-button

1"use client";
2 
3import * as React from "react";
4import { Check, Copy } from "lucide-react";
5import { cn } from "@/lib/utils";
6 
7export function CopyButton({ code, className }: { code: string; className?: string }) {
8  const [hasCopied, setHasCopied] = React.useState(false);
9 
10  React.useEffect(() => {
11    if (!hasCopied) return;
12    const timeout = setTimeout(() => {
13      setHasCopied(false);
14    }, 2000);
15    return () => clearTimeout(timeout);
16  }, [hasCopied]);
17 
18  return (
19    <button
20      className={cn(
21        "relative z-10 flex h-7 w-7 items-center justify-center rounded-md border bg-zinc-900 border-zinc-800 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-50 transition-colors",
22        className
23      )}
24      onClick={() => {
25        navigator.clipboard.writeText(code);
26        setHasCopied(true);
27      }}
28    >
29      <span className="sr-only">Copy</span>
30      {hasCopied ? (
31        <Check className="h-3.5 w-3.5 text-emerald-400" />
32      ) : (
33        <Copy className="h-3.5 w-3.5" />
34      )}
35    </button>
36  );
37}