One-click backups for AT Protocol
1"use client";
2
3import { Check, Copy } from "lucide-react";
4
5import { cn } from "@/lib/utils";
6import { useCopyToClipboard } from "@/components/hooks/use-copy-to-clipboard";
7import { Button } from "@/components/ui/button";
8
9type CopyButtonProps = {
10 content: string;
11 copyMessage?: string;
12};
13
14export function CopyButton({ content, copyMessage }: CopyButtonProps) {
15 const { isCopied, handleCopy } = useCopyToClipboard({
16 text: content,
17 copyMessage,
18 });
19
20 return (
21 <Button
22 variant="ghost"
23 size="icon"
24 className="relative h-6 w-6"
25 aria-label="Copy to clipboard"
26 onClick={handleCopy}
27 >
28 <div className="absolute inset-0 flex items-center justify-center">
29 <Check
30 className={cn(
31 "h-4 w-4 transition-transform ease-in-out",
32 isCopied ? "scale-100" : "scale-0"
33 )}
34 />
35 </div>
36 <Copy
37 className={cn(
38 "h-4 w-4 transition-transform ease-in-out",
39 isCopied ? "scale-0" : "scale-100"
40 )}
41 />
42 </Button>
43 );
44}