From 61a07068d52b11d4bbaa710d6abd0776e717fed0 Mon Sep 17 00:00:00 2001
From: Khairul Hidayat <me@khairul.my.id>
Date: Sat, 17 Aug 2024 01:00:17 +0700
Subject: [PATCH] feat: add copy button to code component

---
 src/components/ui/code.tsx                    | 22 ++++++++++++++-----
 .../components/connect-node-dialog.tsx        |  2 +-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/code.tsx b/src/components/ui/code.tsx
index b9ee210..c242f4a 100644
--- a/src/components/ui/code.tsx
+++ b/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>
   );
 };
 
diff --git a/src/pages/cluster/components/connect-node-dialog.tsx b/src/pages/cluster/components/connect-node-dialog.tsx
index 4bf9c24..2eab88a 100644
--- a/src/pages/cluster/components/connect-node-dialog.tsx
+++ b/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>