Add copyable code block for install custom node. (#7)

* Remove unused page.

* Remove unused page.

* Add copyable code block.

Author: robinjhuang

components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import { IoIosInformationCircle } from 'react-icons/io'
+
+const CopyableCodeBlock = ({ code }) => {
+    const [isCopied, setIsCopied] = useState(false)
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(code)
+            setIsCopied(true)
+            setTimeout(() => setIsCopied(false), 2000) // Reset copied state after 2 seconds
+        } catch (err) {
+            console.error('Failed to copy!', err)
+        }
+    }
+
+    return (
+        <div className="relative p-4 bg-gray-800 text-white rounded-lg font-mono text-sm">
+            <div className="flex items-center gap-1">
+                <a
+                    target="_blank"
+                    href="https://www.comfydocs.org/comfy-cli/getting-started#install-cli"
+                    rel="noopener noreferrer"
+                >
+                    <IoIosInformationCircle
+                        className="h-5 w-5"
+                        title="Install Comfy CLI with: npm install -g comfy-cli"
+                    />
+                </a>
+                <pre>{code}</pre>
+                <button
+                    onClick={handleCopy}
+                    className={`absolute top-4 right-4 text-xs py-1 px-2 rounded ${
+                        isCopied ? 'bg-green-500' : 'bg-blue-500'
+                    } hover:bg-blue-700 transition duration-300 ease`}
+                >
+                    {isCopied ? 'Copied!' : 'Copy'}
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default CopyableCodeBlock

components/nodes/NodeDetails.tsx

@@ -7,6 +7,7 @@ import NodeVDrawer from './NodeVDrawer'
 import Link from 'next/link'
 import { NodeEditModal } from './NodeEditModal'
 import { NodeVersion, useGetNode, useListNodeVersions } from 'src/api/generated'
+import CopyableCodeBlock from '../CodeBlock/CodeBlock'
 
 export function formatRelativeDate(dateString: string) {
     const date = new Date(dateString)
@@ -118,8 +119,8 @@ const NodeDetails = () => {
                                     )}
                                 </div>
                             </div>
-                            <div className="flex flex-col mt-6 mb-10 ">
-                                {data.license && (
+                            <div className="flex flex-col mt-6 mb-6 ">
+                                {/* {data.license && (
                                     <p className="flex items-center py-2 mt-1 text-xs text-center text-gray-400">
                                         <svg
                                             className="w-6 h-6 "
@@ -161,7 +162,7 @@ const NodeDetails = () => {
                                             {data.rating} rating
                                         </span>
                                     </p>
-                                )}
+                                )} */}
                                 {data.downloads && (
                                     <p className="flex items-center py-2 mt-1 text-xs text-gray-400">
                                         <svg
@@ -187,6 +188,11 @@ const NodeDetails = () => {
                                     </p>
                                 )}
                             </div>
+                            <div className="mt-5 mb-10">
+                                <CopyableCodeBlock
+                                    code={`comfy node install ${nodeId}`}
+                                />
+                            </div>
                             <div>
                                 <h2 className="mb-2 text-xl font-bold">
                                     Description
@@ -264,6 +270,13 @@ const NodeDetails = () => {
                                 <span>Edit details</span>
                             </Button>
                         )}
+                        {data.latest_version?.downloadUrl && (
+                            <Button className="flex-shrink-0 px-4 text-white bg-blue-500 rounded whitespace-nowrap text-[16px]">
+                                <Link href={data.latest_version?.downloadUrl}>
+                                    Download Latest
+                                </Link>
+                            </Button>
+                        )}
                     </div>
                 </div>
                 <NodeEditModal