Skip to content

feat(web): add smooth scrolling and enhance installation component #2

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.

Sign up for GitHub

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

Open
Odunsih1 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(web): add smooth scrolling and enhance installation component #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 0 additions & 12 deletions web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

59 changes: 40 additions & 19 deletions web/src/components/Installation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { useState } from "react";

export function Installation() {
const [copied, setCopied] = useState(false);
const [copiedId, setCopiedId] = useState<string | null>(null);

const handleCopy = () => {
navigator.clipboard.writeText("npm install -g envii-cli");
setCopied(true);
setTimeout(() => setCopied(false), 2000);
const handleCopy = (text: string, id: string) => {
navigator.clipboard.writeText(text);
setCopiedId(id);
setTimeout(() => setCopiedId(null), 2000);

@cubic-dev-ai cubic-dev-ai Bot Jan 24, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Earlier copy timeouts can clear copiedId after a newer copy, making the “Copied!” feedback disappear too soon when clicking multiple buttons quickly.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At web/src/components/Installation.tsx, line 9:

<comment>Earlier copy timeouts can clear `copiedId` after a newer copy, making the “Copied!” feedback disappear too soon when clicking multiple buttons quickly.</comment>

<file context>
@@ -1,12 +1,12 @@
+  const handleCopy = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
   };
 
</file context>
Suggested change
setTimeout(() => setCopiedId(null), 2000);
setTimeout(() => setCopiedId(prev => (prev === id ? null : prev)), 2000);
Fix with Cubic

};

return (
Expand Down Expand Up @@ -36,10 +36,10 @@ export function Installation() {
<div className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800">
<span className="text-sm text-zinc-500 font-mono">npm</span>
<button
onClick={handleCopy}
className="text-xs text-zinc-500 hover:text-white transition-colors px-2 py-1 border border-zinc-700 hover:border-zinc-500"
onClick={() => handleCopy("npm install -g envii-cli", "npm")}
className="text-xs text-zinc-500 cursor-pointer hover:text-white transition-colors px-2 py-1 border border-zinc-700 hover:border-zinc-500"
>
{copied ? "Copied!" : "Copy"}
{copiedId === "npm" ? "Copied!" : "Copy"}
</button>
</div>
<div className="p-4 font-mono text-lg">
Expand All @@ -50,18 +50,39 @@ export function Installation() {
</div>
</div>

<div className="mt-6 grid md:grid-cols-2 gap-px bg-zinc-800">
<div className="bg-zinc-950 p-4">
<div className="text-xs text-zinc-600 mb-2 font-mono">pnpm</div>
<code className="text-zinc-300 font-mono text-sm">
pnpm add -g envii-cli
</code>
<div className="mt-6 grid md:grid-cols-2 gap-4">
<div className="border border-zinc-800 bg-zinc-950">
<div className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800">
<span className="text-sm text-zinc-500 font-mono">pnpm</span>
<button
onClick={() => handleCopy("pnpm add -g envii-cli", "pnpm")}
className="text-xs text-zinc-500 cursor-pointer hover:text-white transition-colors px-2 py-1 border border-zinc-700 hover:border-zinc-500"
>
{copiedId === "pnpm" ? "Copied!" : "Copy"}
</button>
</div>
<div className="p-4 font-mono text-sm">
<span className="text-zinc-500">$</span>{" "}
<span className="text-emerald-400">pnpm</span>{" "}
<span className="text-zinc-100">add -g envii-cli</span>
</div>
</div>
<div className="bg-zinc-950 p-4">
<div className="text-xs text-zinc-600 mb-2 font-mono">yarn</div>
<code className="text-zinc-300 font-mono text-sm">
yarn global add envii-cli
</code>

<div className="border border-zinc-800 bg-zinc-950">
<div className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800">
<span className="text-sm text-zinc-500 font-mono">yarn</span>
<button
onClick={() => handleCopy("yarn global add envii-cli", "yarn")}
className="text-xs text-zinc-500 cursor-pointer hover:text-white transition-colors px-2 py-1 border border-zinc-700 hover:border-zinc-500"
>
{copiedId === "yarn" ? "Copied!" : "Copy"}
</button>
</div>
<div className="p-4 font-mono text-sm">
<span className="text-zinc-500">$</span>{" "}
<span className="text-emerald-400">yarn</span>{" "}
<span className="text-zinc-100">global add envii-cli</span>
</div>
</div>
</div>

Expand Down
4 changes: 4 additions & 0 deletions web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

html {
scroll-behavior: smooth;
}

@keyframes shimmer {
0% {
background-position: 200% 0;
Expand Down