Initial import

src/components/TopNavTabs.tsx

@@ -0,0 +1,88 @@
+import type { ConfigTabLabel } from "../editorCore";
+
+type TopNavTabsProps = {
+  contentTypes: string[];
+  configTabLabels: ConfigTabLabel[];
+  activeSection: "content" | "config";
+  activeType: string;
+  activeConfigTab: ConfigTabLabel;
+  hasPendingRecordChanges: boolean;
+  isLoading: boolean;
+  isSaving: boolean;
+  formatTypeLabel: (type: string) => string;
+  onError: (message: string) => void;
+  onSetActiveSection: (section: "content" | "config") => void;
+  onSetActiveType: (type: string) => void;
+  onSetActiveConfigTab: (label: ConfigTabLabel) => void;
+};
+
+export default function TopNavTabs(props: TopNavTabsProps) {
+  const {
+    contentTypes,
+    configTabLabels,
+    activeSection,
+    activeType,
+    activeConfigTab,
+    hasPendingRecordChanges,
+    isLoading,
+    isSaving,
+    formatTypeLabel,
+    onError,
+    onSetActiveSection,
+    onSetActiveType,
+    onSetActiveConfigTab,
+  } = props;
+
+  return (
+    <div className="top-nav-tabs">
+      <div className="nav-cluster">
+        <p className="nav-cluster-title">Content</p>
+        <div className="nav-tab-row">
+          {contentTypes.map((type) => (
+            <button
+              key={`content-tab-${type}`}
+              type="button"
+              className={`nav-pill ${activeSection === "content" && activeType === type ? "is-active" : ""}`}
+              onClick={() => {
+                if (hasPendingRecordChanges && type !== activeType) {
+                  onError("Pending changes are unsaved");
+                  return;
+                }
+                onError("");
+                onSetActiveSection("content");
+                onSetActiveType(type);
+              }}
+              disabled={isLoading || isSaving}
+            >
+              {formatTypeLabel(type)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="nav-cluster">
+        <p className="nav-cluster-title">Configuration</p>
+        <div className="nav-tab-row">
+          {configTabLabels.map((label) => (
+            <button
+              key={`config-tab-${label}`}
+              type="button"
+              className={`nav-pill ${activeSection === "config" && activeConfigTab === label ? "is-active" : ""}`}
+              onClick={() => {
+                if (hasPendingRecordChanges) {
+                  onError("Pending changes are unsaved");
+                  return;
+                }
+                onError("");
+                onSetActiveSection("config");
+                onSetActiveConfigTab(label);
+              }}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}