One-click backups for AT Protocol
at main 44 lines 1.1 kB view raw
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}