// title: API Key Manager "use client"; import { KeyRoundIcon, PlusIcon, RotateCcwIcon, TrashIcon } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { Sheet, SheetClose, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPopup, SheetTitle, SheetTrigger, } from "@/registry/default/ui/sheet"; type ApiKey = { id: number; label: string; created: string; lastUsed: string; prefix: string; }; const initial: ApiKey[] = [ { created: "Jan 3, 2025", id: 1, label: "Production", lastUsed: "2 minutes ago", prefix: "sk_live_••••••••••••••••", }, { created: "Feb 14, 2025", id: 2, label: "Development", lastUsed: "Yesterday", prefix: "sk_test_••••••••••••••••", }, ]; export default function Particle() { const [keys, setKeys] = useState(initial); const [rotating, setRotating] = useState(null); const revoke = (id: number) => setKeys((prev) => prev.filter((k) => k.id !== id)); const rotate = async (id: number) => { setRotating(id); await new Promise((r) => setTimeout(r, 800)); setRotating(null); }; return ( }> API Keys Manage your secret keys. Never share them publicly. {keys.map((key) => (

{key.label}

{key.id === 1 ? "Live" : "Test"}

{key.prefix}

Created {key.created} · Last used {key.lastUsed}

))} }>Close ); }