From 20a4cab4c6035a68c32e17374bce8e064037dc3d Mon Sep 17 00:00:00 2001
From: paul sealock <psealock@gmail.com>
Date: Wed, 29 May 2024 11:32:10 +1200
Subject: [PATCH] add tabPanel

---
 .../client/layout/controller.js               |  2 +-
 .../client/settings/index.js                  | 26 ++++++++++++++++--
 .../woocommerce-admin/client/settings/tabs.js | 27 +++++++++++++++++++
 3 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/settings/tabs.js

diff --git a/plugins/woocommerce-admin/client/layout/controller.js b/plugins/woocommerce-admin/client/layout/controller.js
index f16d7b3f78d..636e1535191 100644
--- a/plugins/woocommerce-admin/client/layout/controller.js
+++ b/plugins/woocommerce-admin/client/layout/controller.js
@@ -350,7 +350,7 @@ export const getPages = () => {
 							  }`,
 						__( 'Settings', 'woocommerce' ),
 					],
-					page,
+					page.label,
 				];
 			},
 			wpOpenMenu: 'toplevel_page_woocommerce',
diff --git a/plugins/woocommerce-admin/client/settings/index.js b/plugins/woocommerce-admin/client/settings/index.js
index 90f55aa4fe0..aa8cf65e1a3 100644
--- a/plugins/woocommerce-admin/client/settings/index.js
+++ b/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;
diff --git a/plugins/woocommerce-admin/client/settings/tabs.js b/plugins/woocommerce-admin/client/settings/tabs.js
new file mode 100644
index 00000000000..ba55e6661ab
--- /dev/null
+++ b/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>
+		</>
+	);
+};