add copy to clipboard feature (#728)

Author: vimode

frontend/src/components/CopyToClipboard.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+
+type Props = {
+  codeText: string;
+  lang?: string;
+};
+
+const CopyToClipboard = ({ codeText, lang = "language-python" }: Props): JSX.Element => {
+  const [copied, setCopied] = useState(false);
+
+  const textToCopy = codeText.trim();
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (e) {
+      console.error("Copy failed", e);
+    }
+  };
+
+  return (
+    <dd className="mt-2 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+      <div className="relative">
+        <pre className="overflow-auto rounded-md bg-gray-100 p-4">
+          <code className={lang}>{codeText}</code>
+        </pre>
+
+        <button
+          type="button"
+          onClick={handleCopy}
+          aria-label="Copy code"
+          className="absolute right-2 top-2 rounded bg-white/90 px-2 py-1 text-xs font-medium text-gray-700 shadow"
+        >
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+    </dd>
+  );
+};
+
+export default CopyToClipboard;

frontend/src/components/SingleView.tsx

@@ -9,6 +9,7 @@ import {
 } from '@/utils/ExtractThumbnails'
 import { PageTitle } from '@/components/Typography'
 import { MiniCard } from '@/components/Card'
+import  CopyToClipboard  from "@/components/CopyToClipboard"
 
 import ReactMarkdown from 'react-markdown'
 
@@ -46,14 +47,10 @@ export function ModelSingleView({
                     </Link>
                     :
                 </dt>
-                <dd className="mt-2 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                    <pre>
-                        <code className="language-python">
-                            {`from scivision import load_pretrained_model
+                <CopyToClipboard
+                  codeText={`from scivision import load_pretrained_model
 load_pretrained_model("${url}")`}
-                        </code>
-                    </pre>
-                </dd>
+                />
             </div>
         </>
     ) : (
@@ -115,13 +112,9 @@ load_pretrained_model("${url}")`}
                         <dt className="text-sm font-medium leading-6 text-gray-900">
                             Install with pip
                         </dt>
-                        <dd className="mt-2 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                            <pre>
-                                <code className="language-python">
-                                    pip install {pkg_url}
-                                </code>
-                            </pre>
-                        </dd>
+                        <CopyToClipboard
+                          codeText={`pip install ${pkg_url}`}
+                        />
                     </div>
                     {scivision_code}
                 </dl>