add tabPanel

plugins/woocommerce-admin/client/layout/controller.js

@@ -350,7 +350,7 @@ export const getPages = () => {
 							  }`,
 						__( 'Settings', 'woocommerce' ),
 					],
-					page,
+					page.label,
 				];
 			},
 			wpOpenMenu: 'toplevel_page_woocommerce',

plugins/woocommerce-admin/client/settings/index.js

@@ -1,3 +1,25 @@
-export default ( {} ) => {
-	return <div>Settings page</div>;
+/**
+ * External dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Tabs } from './tabs';
+
+const Settings = ( { params } ) => {
+	const settingsData = window.wcSettings?.admin?.settingsPages;
+
+	if ( ! settingsData ) {
+		return <div>Error getting data</div>;
+	}
+
+	return (
+		<>
+			<Tabs data={ settingsData } page={ params.page } />
+		</>
+	);
 };
+
+export default Settings;

plugins/woocommerce-admin/client/settings/tabs.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { TabPanel } from '@wordpress/components';
+
+export const Tabs = ( { data, page } ) => {
+	const onSelect = ( tabName ) => {
+		console.log( 'Selecting tab', tabName );
+	};
+
+	return (
+		<>
+			<TabPanel
+				className="my-tab-panel"
+				activeClass="active-tab"
+				onSelect={ onSelect }
+				initialTabName={ page }
+				tabs={ Object.keys( data ).map( ( key ) => ( {
+					name: key,
+					title: data[ key ].label,
+				} ) ) }
+			>
+				{ ( tab ) => <p>{ tab.title }</p> }
+			</TabPanel>
+		</>
+	);
+};