snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx

@@ -0,0 +1,48 @@
+import { Tabs, TabsItem } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import type { ReactNode } from 'react';
+import { memo, useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import GenericGroupPage from './GenericGroupPage';
+import { useEditableSettingsGroupSections } from '../../EditableSettingsContext';
+
+export type TabbedGroupPageProps = {
+	headerButtons?: ReactNode;
+	_id: string;
+	i18nLabel: string;
+	tabs: string[];
+	onClickBack?: () => void;
+};
+
+function TabbedGroupPage({ _id, tabs, i18nLabel, onClickBack, ...props }: TabbedGroupPageProps) {
+	const { t } = useTranslation();
+
+	const [currentTab, setCurrentTab] = useState(tabs[0]);
+	const handleTabClick = useMemo(() => (tab: string) => (): void => setCurrentTab(tab), [setCurrentTab]);
+	const sections = useEditableSettingsGroupSections(_id, currentTab);
+
+	const tabsComponent = (
+		<Tabs>
+			{tabs.map((tabName) => (
+				<TabsItem key={tabName || ''} selected={currentTab === tabName} onClick={handleTabClick(tabName)}>
+					{tabName ? t(tabName as TranslationKey) : t(_id as TranslationKey)}
+				</TabsItem>
+			))}
+		</Tabs>
+	);
+
+	return (
+		<GenericGroupPage
+			_id={_id}
+			i18nLabel={i18nLabel}
+			onClickBack={onClickBack}
+			sections={sections}
+			currentTab={currentTab}
+			tabs={tabsComponent}
+			{...props}
+		/>
+	);
+}
+
+export default memo(TabbedGroupPage);