88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
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>
|
|
);
|
|
}
|