My API Keys Page

[LudoLogical]

Story

As an authenticated developer, project leader, or developer portal admin, I want to see a page consisting of my Basic API Key and any Advanced API Keys I might have (or instructions for how to get one if I don't have any).

Description

Update the page index.tsx in the Developer Portal Next.js app to optionally show an authenticated view that resembles the relevant frames in the Figma file for Platform.

Acceptance Criteria

1. index.tsx can show either the "Join Developer Portal" page or the "My API Keys" page depending on whether the user is authenticated and whether the user is a developer or higher.
2. The "My API Keys" page appears as shown in the Figma file. It consists of a BasicKeyView and either a KeyTable or relevant copy, as well as the common Sidebar and Footer.
3. The "Regenerate" button opens a DialogBox asking for confirmation. The actual regeneration does not need to work (yet).
4. The function calls necessary for the interactive elements in the KeyTable DialogBoxes to work are mocked. They do not need to actually work (yet).
5. The KeyTable is only shown if it has one or more keys to display.
6. If there are no keys to display, the KeyTable is hidden and some copy is shown. The copy is different for developers, project leaders, and developer portal admins. Any links in the copy are functional.

Notes

None