Handel Responsive/Mobile

frontend/src/app/scripts/_components/ScriptItems/ConfigFile.tsx

@@ -1,10 +1,10 @@
-import CodeCopyButton from "@/components/ui/code-copy-button";
+import ConfigCopyButton from "@/components/ui/config-copy-button";
 import { Script } from "@/lib/types";
 
 export default function ConfigFile({ item }: { item: Script }) {
   return (
     <div className="px-4 pb-4">
-      <CodeCopyButton>{item.config_path ? item.config_path : "No config path set"}</CodeCopyButton>
+      <ConfigCopyButton>{item.config_path ? item.config_path : "No config path set"}</ConfigCopyButton>
     </div>
   );
 }

frontend/src/components/ui/config-copy-button.tsx

@@ -0,0 +1,55 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ClipboardIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Card } from "./card";
+
+export default function CodeCopyButton({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [hasCopied, setHasCopied] = useState(false);
+  const isMobile = window.innerWidth <= 640;
+
+  useEffect(() => {
+    if (hasCopied) {
+      setTimeout(() => {
+        setHasCopied(false);
+      }, 2000);
+    }
+  }, [hasCopied]);
+
+  const handleCopy = (type: string, value: any) => {
+    navigator.clipboard.writeText(value);
+
+    setHasCopied(true);
+
+
+    // toast.success(`copied ${type} to clipboard`, {
+    //   icon: <ClipboardCheck className="h-4 w-4" />,
+    // });
+  };
+
+  return (
+    <div className="mt-4 flex">
+      <Card className="flex items-center overflow-x-auto bg-primary-foreground pl-4">
+        <div className="overflow-x-auto whitespace-pre-wrap text-nowrap break-all pr-4 text-sm">
+          {!isMobile && children ? children : "Copy Config File Path"}
+        </div>
+        <div
+          className={cn(" right-0 cursor-pointer bg-muted px-3 py-4")}
+          onClick={() => handleCopy("install command", children)}
+        >
+          {hasCopied ? (
+            <CheckIcon className="h-4 w-4" />
+          ) : (
+            <ClipboardIcon className="h-4 w-4" />
+          )}
+          <span className="sr-only">Copy</span>
+        </div>
+      </Card>
+    </div>
+  );
+}