66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Check, Copy, Terminal } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const INSTALL_COMMAND = "clawhub install openclaw-reporter";
|
|
|
|
export function InstallBanner() {
|
|
const t = useTranslations("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)]">
|
|
{t("title")}
|
|
</p>
|
|
<p className="text-xs text-[var(--text-muted)] truncate">
|
|
{t("subtitle")}
|
|
</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={t("copyTooltip")}
|
|
>
|
|
<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>
|
|
);
|
|
}
|