64c827ee84
- COMP-139: Command palette for quick navigation - COMP-140: Accessibility improvements - COMP-141: Scroll animations with animate-on-scroll component - COMP-143: Demo workspace with seed data and demo banner - COMP-145: Keyboard navigation and shortcuts help Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-Claude) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { Beaker, ArrowRight, X } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const DISMISS_KEY = "agentlens-demo-banner-dismissed";
|
|
|
|
interface DemoBannerProps {
|
|
allTracesAreDemo: boolean;
|
|
}
|
|
|
|
export function DemoBanner({ allTracesAreDemo }: DemoBannerProps) {
|
|
const [dismissed, setDismissed] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setDismissed(localStorage.getItem(DISMISS_KEY) === "true");
|
|
}, []);
|
|
|
|
if (dismissed || !allTracesAreDemo) return null;
|
|
|
|
function handleDismiss() {
|
|
setDismissed(true);
|
|
localStorage.setItem(DISMISS_KEY, "true");
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative mb-6 rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4",
|
|
"flex items-center gap-4"
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 shrink-0">
|
|
<Beaker className="w-5 h-5 text-emerald-400" />
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-emerald-200 font-medium">
|
|
You are viewing sample data.
|
|
</p>
|
|
<p className="text-xs text-emerald-400/60 mt-0.5">
|
|
Connect your agent to start collecting real traces.
|
|
</p>
|
|
</div>
|
|
|
|
<Link
|
|
href="/docs/getting-started"
|
|
className="hidden sm:flex items-center gap-1.5 px-4 py-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors shrink-0"
|
|
>
|
|
View Setup Guide
|
|
<ArrowRight className="w-3.5 h-3.5" />
|
|
</Link>
|
|
|
|
<button
|
|
onClick={handleDismiss}
|
|
aria-label="Dismiss demo banner"
|
|
className="p-1.5 rounded-lg text-emerald-400/40 hover:text-emerald-400/80 hover:bg-emerald-500/10 transition-colors shrink-0"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|