ApiKeysTableIllustration() — supabase Function Reference

Source Code

apps/studio/components/interfaces/APIKeys/ApiKeysIllustrations.tsx lines 48–87

const ApiKeysTableIllustration = () => {
  return (
    <Card className="w-full overflow-hidden opacity-60 pointer-events-none bg-surface-100">
      <CardContent className="p-0">
        <Table className="p-5">
          <TableHeader>
            <TableRow className="bg-200">
              <TableHead
                key=""
                className="text-left font-mono uppercase text-xs text-foreground-lighter h-auto py-2 overflow-hidden w-[180px]"
              >
                Name
              </TableHead>
              <TableHead className="text-left font-mono uppercase text-xs text-foreground-lighter h-auto py-2 pr-0">
                API Key
              </TableHead>
              <TableHead
                className="text-right font-mono uppercase text-xs text-foreground-lighter h-auto py-2"
                key="actions"
              />
            </TableRow>
          </TableHeader>
          <TableBody>
            {mockApiKeys.map((apiKey) => (
              <TableRow key={apiKey.id}>
                <TableCell className="py-2 w-[180px]">{apiKey.name}</TableCell>
                <TableCell className="py-2">
                  <div className="flex flex-row gap-2">
                    <ApiKeyPill apiKey={apiKey} />
                  </div>
                </TableCell>
                <TableCell />
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}