Add tab panel for main navigation

package.json

@@ -25,6 +25,7 @@
 		"@woocommerce/dependency-extraction-webpack-plugin": "1.4.0"
 	},
 	"dependencies": {
+		"@wordpress/components": "^12.0.7",
 		"@wordpress/element": "^2.19.1"
 	}
 }

src/App/app.js

@@ -1,5 +1,41 @@
+/**
+ * External dependencies.
+ */
+import { TabPanel } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+// TODO replace this with the actual controls
+// import { Options } from '../Options';
+const Options = () => <h2>Options</h2>;
+const AdminNotes = () => <h2>Admin notes</h2>;
+
+const tabs = [
+    {
+        name: 'options',
+        title: 'Options',
+        content: <Options/>,
+    },
+    {
+        name: 'admin-notes',
+        title: 'Admin notes',
+        content: <AdminNotes/>
+    },
+];
 
 export function App() {
-    return <h1>WooCommerce Admin Test Helper</h1>;
+    return (
+        <div className="wrap">
+            <h1>WooCommerce Admin Test Helper</h1>
+            <TabPanel
+                className="woocommerce-admin-test-helper__main-tab-panel"
+                activeClass="active-tab"
+                tabs={ tabs }
+                initialTabName={ tabs[0].name }
+            >
+                { ( tab ) => <p>{ tab.content }</p> }
+            </TabPanel>
+        </div>
+    );
 }

src/index.scss

@@ -1 +1,6 @@
-// Add styles here.
+.woocommerce-admin-test-helper__main-tab-panel {
+    .active-tab {
+        box-shadow: inset 0 1.5px #007cba;
+        box-shadow: inset 0 1.5px var(--wp-admin-theme-color);
+    }
+}

woocommerce-admin-test-helper.php

@@ -33,7 +33,9 @@ function add_extension_register_script() {
 		'woocommerce-admin-test-helper',
 		plugins_url( '/build/index.css', __FILE__ ),
 		// Add any dependencies styles may have, such as wp-components.
-		array(),
+		array(
+			'wp-components',
+		),
 		filemtime( dirname( __FILE__ ) . '/build/index.css' )
 	);