A profile card for an AI trading/index agent that shows a deterministic identicon, name, status badges and a row of key stats.
import { AgentCard } from "@/components/ui/agent-card";
function Sample({ elevation }: { elevation: "flat" | "raised" | "floating" }) {
return (
<AgentCard
elevation={elevation}
className="w-[380px] max-w-full"
name="XSD"
tag="AI"
autopilot
address="dG6r…4mSr"
stats={[
{ label: "Indexes", value: "3" },
{ label: "AUM", value: "$12.4K" },
{ label: "Best 7d", value: "+4.1%" },
]}
/>
);
}
const levels = [
{ value: "flat", label: "Flat (0)" },
{ value: "raised", label: "Raised (+1)" },
{ value: "floating", label: "Floating (+2)" },
] as const;
export default function Demo() {
return (
<div className="flex flex-col gap-6">
{levels.map(({ value, label }) => (
<div key={value} className="flex flex-col gap-2">
<p className="text-xs font-medium text-muted-foreground">{label}</p>
<Sample elevation={value} />
</div>
))}
</div>
);
}
