Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add copyable code block for install custom node. #7

Merged
merged 3 commits into from
May 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions components/CodeBlock/CodeBlock.tsx
Original file line number Diff line number Diff line change
@@ -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
19 changes: 16 additions & 3 deletions components/nodes/NodeDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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 "
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
138 changes: 0 additions & 138 deletions components/nodes/NodesPublisherDetail.tsx

This file was deleted.

12 changes: 0 additions & 12 deletions pages/nodes/publisher-detail/[id].tsx

This file was deleted.

Loading