1 files changed, 49 insertions, 0 deletions
diff --git a/apps/web/components/settings/ApiKeySettings.tsx b/apps/web/components/settings/ApiKeySettings.tsx
new file mode 100644
index 00000000..4d43be7a
--- /dev/null
+++ b/apps/web/components/settings/ApiKeySettings.tsx
@@ -0,0 +1,49 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { api } from "@/server/api/client";
+
+import AddApiKey from "./AddApiKey";
+import DeleteApiKey from "./DeleteApiKey";
+
+export default async function ApiKeys() {
+  const keys = await api.apiKeys.list();
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <div className="mb-2 text-lg font-medium">API Keys</div>
+        <AddApiKey />
+      </div>
+      <div className="mt-2">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Key</TableHead>
+              <TableHead>Created At</TableHead>
+              <TableHead>Action</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {keys.keys.map((k) => (
+              <TableRow key={k.id}>
+                <TableCell>{k.name}</TableCell>
+                <TableCell>**_{k.keyId}_**</TableCell>
+                <TableCell>{k.createdAt.toLocaleString()}</TableCell>
+                <TableCell>
+                  <DeleteApiKey name={k.name} id={k.id} />
+                </TableCell>
+              </TableRow>
+            ))}
+            <TableRow></TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}