) => {
+ const labelComponent = props.label && (
+
+ );
+
+ return (
+
+ {labelComponent}
+ ,
+ key: `${props.firebasePath}-write`,
+ },
+ {
+ title: 'Preview',
+ getContent: () => ,
+ key: `${props.firebasePath}-preview`,
+ },
+ ]}
+ toolbars={{
+ default: (
+
+ ),
+ }}
+ >
+
+ );
+};
+
/**
* Checkbox and Radio inputs
*/
diff --git a/src/main/webapp/app/shared/tab/TabsContainer.tsx b/src/main/webapp/app/shared/tab/TabsContainer.tsx
new file mode 100644
index 000000000..98bdc2359
--- /dev/null
+++ b/src/main/webapp/app/shared/tab/TabsContainer.tsx
@@ -0,0 +1,55 @@
+import React, { useMemo, useState } from 'react';
+import './tabs-container.scss';
+
+export type Tabs = {
+ title: string;
+ getContent: () => JSX.Element;
+ key: string;
+}[];
+
+export type ToolbarMap = {
+ [K in T[number]['key']]?: React.ReactNode;
+} & {
+ // Toolbar shown on all tabs if no specific key matches
+ default?: React.ReactNode;
+};
+
+export interface ITabsContainer {
+ tabs: Tabs;
+ toolbars?: ToolbarMap;
+}
+
+export default function TabsContainer({ tabs, toolbars }: ITabsContainer) {
+ const [selectedTab, setSelectedTab] = useState(tabs[0].key);
+
+ const activeToolbar = useMemo(() => {
+ if (toolbars?.[selectedTab]) {
+ return toolbars[selectedTab];
+ }
+ if (toolbars?.default) {
+ return toolbars.default;
+ }
+ return <>;
+ }, []);
+
+ const activeTabIndex = tabs.findIndex(value => value.key === selectedTab);
+
+ return (
+
+
+
+ {tabs.map(tab => (
+ -
+
+
+ ))}
+
+
{activeToolbar}
+
+
+
{activeTabIndex > -1 ? tabs[activeTabIndex].getContent() : <>}
+