fix: add copy button to log details sections

apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx

@@ -1,12 +1,36 @@
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { toast } from "@/components/ui/toaster";
+import { Copy } from "lucide-react";
 
 export const LogMetaSection = ({ content }: { content: string }) => {
+  const handleClick = () => {
+    navigator.clipboard
+      .writeText(content)
+      .then(() => {
+        toast.success("Meta copied to clipboard");
+      })
+      .catch((error) => {
+        console.error("Failed to copy to clipboard:", error);
+        toast.error("Failed to copy to clipboard");
+      });
+  };
+
   return (
     <div className="flex justify-between pt-2.5 px-3">
       <div className="text-sm text-content/65 font-sans">Meta</div>
       <Card className="rounded-[5px] flex">
-        <CardContent className="text-[12px] w-[300px] flex-2 bg-background-subtle p-3 rounded-[5px]">
+        <CardContent className="text-[12px] w-[300px] flex-2 bg-background-subtle p-3 rounded-[5px] relative group">
           <pre>{content}</pre>
+          <Button
+            size="icon"
+            variant="outline"
+            onClick={handleClick}
+            className="absolute bottom-2 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Copy content"
+          >
+            <Copy size={14} />
+          </Button>
         </CardContent>
       </Card>
     </div>

apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx

@@ -1,4 +1,7 @@
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { toast } from "@/components/ui/toaster";
+import { Copy } from "lucide-react";
 
 export const LogSection = ({
   details,
@@ -7,28 +10,64 @@ export const LogSection = ({
   details: string | string[];
   title: string;
 }) => {
+  const handleClick = () => {
+    navigator.clipboard
+      .writeText(getFormattedContent(details))
+      .then(() => {
+        toast.success(`${title} copied to clipboard`);
+      })
+      .catch((error) => {
+        console.error("Failed to copy to clipboard:", error);
+        toast.error("Failed to copy to clipboard");
+      });
+  };
+
   return (
     <div className="px-3 flex flex-col gap-[2px]">
-      <span className="text-sm text-content/65 font-sans">{title}</span>
+      <div className="flex justify-between items-center">
+        <span className="text-sm text-content/65 font-sans">{title}</span>
+      </div>
       <Card className="rounded-[5px] bg-background-subtle">
-        <CardContent className="p-2 text-[12px]">
+        <CardContent className="p-2 text-[12px] relative group">
           <pre>
             {Array.isArray(details)
               ? details.map((header) => {
                   const [key, ...valueParts] = header.split(":");
                   const value = valueParts.join(":").trim();
                   return (
                     <span key={header}>
-                      <span className="text-content/65 ">{key}</span>
+                      <span className="text-content/65">{key}</span>
                       <span className="text-content whitespace-pre-line">: {value}</span>
                       {"\n"}
                     </span>
                   );
                 })
               : details}
           </pre>
+          <Button
+            size="icon"
+            variant="outline"
+            onClick={handleClick}
+            className="absolute bottom-2 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Copy content"
+          >
+            <Copy size={14} />
+          </Button>
         </CardContent>
       </Card>
     </div>
   );
 };
+
+const getFormattedContent = (details: string | string[]) => {
+  if (Array.isArray(details)) {
+    return details
+      .map((header) => {
+        const [key, ...valueParts] = header.split(":");
+        const value = valueParts.join(":").trim();
+        return `${key}: ${value}`;
+      })
+      .join("\n");
+  }
+  return details;
+};