Refactor copy button implementation to use ClipboardIcon and enhance styling in ScriptItems and TextCopyBlock components

Author: BramSuurdje

src/app/scripts/_components/ScriptItems/InterFaces.tsx

@@ -1,5 +1,7 @@
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import handleCopy from "@/lib/handleCopy";
+import { cn } from "@/lib/utils";
+import { ClipboardIcon } from "lucide-react";
 
 interface Item {
   interface?: string;
@@ -13,13 +15,13 @@ const CopyButton = ({
   label: string;
   value: string | number;
 }) => (
-  <Button
-    variant="secondary"
-    size="sm"
-    onClick={() => handleCopy(label, String(value))}
-  >
+  <span className={cn(buttonVariants({size: "sm", variant: "secondary"}), "flex items-center gap-2")}>
     {value}
-  </Button>
+    <ClipboardIcon
+      onClick={() => handleCopy(label, String(value))}
+      className="size-4 cursor-pointer"
+    />
+  </span>
 );
 
 export default function InterFaces({ item }: { item: Item }) {

src/lib/TextCopyBlock.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import handleCopy from "./handleCopy";
-import { Copy } from "lucide-react";
+import { ClipboardIcon, Copy } from "lucide-react";
 
 export default function TextCopyBlock(description: string) {
   const pattern = /`([^`]*)`/g;
@@ -14,7 +14,7 @@ export default function TextCopyBlock(description: string) {
           className="bg-secondary py-1 px-2 rounded-lg inline-flex items-center gap-2"
         >
           {part}
-          <Copy
+          <ClipboardIcon
             className="size-3 cursor-pointer"
             onClick={() => handleCopy("command", part)}
           />