apps/web/components/dashboard/settings/ApiKeySettings.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

import { Separator } from "@/components/ui/separator";
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 className="pt-4">
      <span className="text-xl">API Keys</span>
      <Separator className="my-2" />
      <div className="flex flex-col space-y-3">
        <div className="flex flex-1 justify-end">
          <AddApiKey />
        </div>
        <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>
  );
}