-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathAppShell.tsx
More file actions
68 lines (62 loc) · 2.24 KB
/
Copy pathAppShell.tsx
File metadata and controls
68 lines (62 loc) · 2.24 KB
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import type { ReactNode } from "react";
import { StackOverflowLogo } from "./StackOverflowLogo";
export type AppPanel = "report" | "credentials" | "uploads" | "datasets" | "write-tools";
interface AppShellSummary {
credentialsSaved: boolean;
datasetCount: number;
}
interface AppShellProps {
activePanel: AppPanel;
onPanelChange: (panel: AppPanel) => void;
sidebar: ReactNode;
children: ReactNode;
summary?: AppShellSummary;
}
const panelLabels: Record<AppPanel, string> = {
report: "Reports",
credentials: "Credentials",
uploads: "Uploads",
datasets: "Datasets",
"write-tools": "Write Tools",
};
export function AppShell({ activePanel, onPanelChange, sidebar, children, summary }: AppShellProps) {
const credentialsLabel = summary?.credentialsSaved ? "Credentials saved" : "No credentials";
const datasetCount = summary?.datasetCount ?? 0;
const datasetLabel = `${datasetCount} ${datasetCount === 1 ? "dataset" : "datasets"}`;
return (
<div className="app-shell">
<header className="app-topbar">
<div className="app-brand-block">
<StackOverflowLogo className="app-brand-logo" />
<div className="app-title">
<p className="app-kicker">Enterprise API tools</p>
<h1 className="app-heading">Stack API Utilities</h1>
</div>
</div>
<nav className="app-nav" aria-label="Application panels">
{(Object.keys(panelLabels) as AppPanel[]).map((panel) => (
<button
className={`app-nav-button${activePanel === panel ? " is-selected" : ""}`}
type="button"
aria-pressed={activePanel === panel}
onClick={() => onPanelChange(panel)}
key={panel}
>
{panelLabels[panel]}
</button>
))}
</nav>
<div className="app-session-pills" aria-label="Session status">
<span className="session-pill">{credentialsLabel}</span>
<span className="session-pill">{datasetLabel}</span>
</div>
</header>
<div className="app-body">
<aside className="app-sidebar">{sidebar}</aside>
<main className="app-main" aria-label="Workspace">
{children}
</main>
</div>
</div>
);
}