API key list

"use client";
import * as React from "react";
import { ApiKeyList, type ApiKeyRow } from "@/components/ui/notchset/blocks/api-key-list";
import { Card } from "@/components/ui/notchset/card";

const KEYS: ApiKeyRow[] = [
  { id: "a", name: "Production sync", masked: "ns_live_••••7f3a", scope: "Read and write", created: "Aug 4", lastUsed: "21 min ago", by: "Priya" },
  { id: "b", name: "Data warehouse export", masked: "ns_live_••••c19e", scope: "Read only", created: "Jun 11", lastUsed: "Today 2:00", by: "Daniel" },
  { id: "c", name: "Old reporting script", masked: "ns_live_••••02bd", scope: "Read only", created: "Mar 2", lastUsed: "Jul 28", by: "Marcus", revoked: "Aug 1" },
];

export default function ApiKeyListDemo() {
  const [keys, setKeys] = React.useState(KEYS);
  return (
    <Card className="w-full max-w-[760px]">
      <ApiKeyList
        keys={keys}
        onRevoke={(id) => {
          setKeys((ks) => ks.map((k) => (k.id === id ? { ...k, revoked: "Just now" } : k)));
          return true;
        }}
      />
    </Card>
  );
}