feat: add copy button to code component

src/components/ui/code.tsx

@@ -1,17 +1,29 @@
-import { cn } from "@/lib/utils";
+import { cn, copyToClipboard } from "@/lib/utils";
 import React from "react";
+import Button from "./button";
+import { Copy } from "lucide-react";
 
-type Props = React.ComponentPropsWithoutRef<"code">;
+type Props = Omit<React.ComponentPropsWithoutRef<"code">, "children"> & {
+  children?: string;
+};
 
-const Code = ({ className, ...props }: Props) => {
+const Code = ({ className, children, ...props }: Props) => {
   return (
     <code
       className={cn(
-        "border border-base-content/20 px-4 py-3 rounded-lg font-mono block",
+        "border border-base-content/20 px-4 py-3 rounded-lg font-mono block relative",
         className
       )}
       {...props}
+    >
+      {children}
+      <Button
+        icon={Copy}
+        className="absolute right-0 top-0"
+        color="ghost"
+        onClick={() => copyToClipboard(children || "")}
       />
+    </code>
   );
 };
 

src/pages/cluster/components/connect-node-dialog.tsx

@@ -59,7 +59,7 @@ const ConnectNodeDialog = () => {
         >
           <Modal.Header>Connect Node</Modal.Header>
           <Modal.Body>
-            <p>Run this command to get node id:</p>
+            <p>Run this command in your target node to get node id:</p>
             <Code className="mt-2">docker exec garage /garage node id</Code>
 
             <p className="mt-8">Enter node id:</p>