init

components/layout/install-banner.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy, Terminal } from "lucide-react";
+
+const INSTALL_COMMAND = "clawhub install openclaw-reporter";
+
+export function InstallBanner() {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(INSTALL_COMMAND);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // fallback: select the text
+    }
+  };
+
+  return (
+    <div className="glow-card rounded-xl px-5 py-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        {/* Left: description */}
+        <div className="flex items-center gap-3 min-w-0">
+          <div
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
+            style={{ backgroundColor: "rgba(0, 240, 255, 0.1)" }}
+          >
+            <span className="text-lg">🦞</span>
+          </div>
+          <div className="min-w-0">
+            <p className="text-sm font-medium text-[var(--text-primary)]">
+              Join the Heatmap
+            </p>
+            <p className="text-xs text-[var(--text-muted)] truncate">
+              Install the skill and let your lobster light up the globe
+            </p>
+          </div>
+        </div>
+
+        {/* Right: copy command */}
+        <button
+          onClick={handleCopy}
+          className="group flex items-center gap-2 rounded-lg border border-white/10 bg-[var(--bg-primary)] px-4 py-2.5 transition-all hover:border-[var(--accent-cyan)]/40 hover:bg-[var(--bg-primary)]/80 active:scale-[0.98] cursor-pointer shrink-0"
+          title="Click to copy"
+        >
+          <Terminal className="h-3.5 w-3.5 text-[var(--text-muted)]" />
+          <code className="font-mono text-sm text-[var(--accent-cyan)] select-all">
+            {INSTALL_COMMAND}
+          </code>
+          <div className="ml-1 flex h-5 w-5 items-center justify-center">
+            {copied ? (
+              <Check className="h-3.5 w-3.5 text-[var(--accent-green)]" />
+            ) : (
+              <Copy className="h-3.5 w-3.5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--accent-cyan)]" />
+            )}
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+}