Template
Rami Bitar
6376bb3d82
Use remote logos and avatars, refine landing copy, and document the template structure.
61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { Activity, CircleCheck, Route, ShieldCheck, Zap } from "lucide-react"
|
|
|
|
import { AnimatedList } from "@/components/ui/animated-list"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const routingEvents = [
|
|
{
|
|
icon: <Route className="size-4" />,
|
|
title: "Routed to Claude Sonnet",
|
|
meta: "342ms · 8.2k tokens",
|
|
accent: "bg-blue-600/15 text-blue-600 dark:text-blue-400",
|
|
},
|
|
{
|
|
icon: <Zap className="size-4" />,
|
|
title: "Prompt cache hit",
|
|
meta: "Saved $0.018 · 42ms",
|
|
accent: "bg-amber-500/15 text-amber-500",
|
|
},
|
|
{
|
|
icon: <Activity className="size-4" />,
|
|
title: "Latency policy applied",
|
|
meta: "Gemini Flash · 118ms",
|
|
accent: "bg-blue-500/15 text-blue-500",
|
|
},
|
|
{
|
|
icon: <CircleCheck className="size-4" />,
|
|
title: "Fallback completed",
|
|
meta: "OpenAI → Mistral · 621ms",
|
|
accent: "bg-emerald-500/15 text-emerald-500",
|
|
},
|
|
{
|
|
icon: <ShieldCheck className="size-4" />,
|
|
title: "Guardrail passed",
|
|
meta: "No sensitive data detected",
|
|
accent: "bg-cyan-500/15 text-cyan-500",
|
|
},
|
|
]
|
|
|
|
export function RoutingActivity() {
|
|
return (
|
|
<div className="relative h-[360px] shrink-0 overflow-hidden bg-background">
|
|
<AnimatedList delay={1150} className="absolute inset-x-4 top-4 gap-2">
|
|
{routingEvents.map((event) => (
|
|
<div key={event.title} className="mx-auto flex w-full max-w-sm items-center gap-3 rounded-xl border bg-background/95 p-3 shadow-sm">
|
|
<span className={cn("flex size-9 shrink-0 items-center justify-center rounded-lg", event.accent)}>
|
|
{event.icon}
|
|
</span>
|
|
<span className="min-w-0 text-left">
|
|
<span className="block truncate text-xs font-medium">{event.title}</span>
|
|
<span className="mt-0.5 block truncate font-mono text-[10px] text-muted-foreground">{event.meta}</span>
|
|
</span>
|
|
</div>
|
|
))}
|
|
</AnimatedList>
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-background to-transparent" />
|
|
</div>
|
|
)
|
|
}
|