start components

plugins/woocommerce-admin/client/settings/components/checkbox.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+export const SettingsCheckbox = ( { setting } ) => {
+	return (
+		<div>
+			<h3>{ setting.title }</h3>
+			<CheckboxControl
+				label={ setting.desc }
+				onChange={ () => console.log( 'change' ) }
+				selected={ true }
+			/>
+		</div>
+	);
+};

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

@@ -0,0 +1 @@
+export { SettingsCheckbox } from './checkbox';

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

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { SettingsCheckbox } from './components';
+
+export const Content = ( { data } ) => {
+	const { settings } = data;
+
+	return (
+		<div>
+			{ settings.map( ( setting ) => {
+				switch ( setting.type ) {
+					case 'title':
+						return null;
+					case 'checkbox':
+						return (
+							<SettingsCheckbox
+								setting={ setting }
+								key={ setting.id }
+							/>
+						);
+					default:
+						return null;
+				}
+			} ) }
+		</div>
+	);
+};

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

@@ -1,17 +1,19 @@
 /**
  * External dependencies
  */
-import { useState } from '@wordpress/element';
+import { getQuery } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
 import { Tabs } from './tabs';
 import { SectionNav } from './section-nav';
+import { Content } from './content';
 import './style.scss';
 
 const Settings = ( { params } ) => {
 	const settingsData = window.wcSettings?.admin?.settingsPages;
+	const { section } = getQuery();
 
 	if ( ! settingsData ) {
 		return <div>Error getting data</div>;
@@ -22,10 +24,17 @@ const Settings = ( { params } ) => {
 			<Tabs data={ settingsData } page={ params.page }>
 				<div className="woocommerce-settings-layout">
 					<div className="woocommerce-settings-section-nav">
-						<SectionNav data={ settingsData[ params.page ] } />
+						<SectionNav
+							data={ settingsData[ params.page ] }
+							section={ section }
+						/>
 					</div>
 					<div className="woocommerce-settings-content">
-						<p>Content here</p>
+						<Content
+							data={
+								settingsData[ params.page ].sections[ section ]
+							}
+						/>
 					</div>
 				</div>
 			</Tabs>

plugins/woocommerce-admin/client/settings/section-nav.js

@@ -9,10 +9,9 @@ import {
 import { getNewPath, navigateTo, getQuery } from '@woocommerce/navigation';
 import classnames from 'classnames';
 
-export const SectionNav = ( { data } ) => {
+export const SectionNav = ( { data, section } ) => {
 	const { sections } = data;
 	const sectionKeys = Object.keys( sections );
-	const { section } = getQuery();
 
 	if ( sectionKeys.length === 1 ) {
 		return null;

plugins/woocommerce/src/Admin/Features/Settings.php

@@ -54,6 +54,8 @@ class Settings {
 			return $settings;
 		}
 
+		// TODO: change so its only being added on Settings page, otherwise bail.
+
 		$setting_pages = \WC_Admin_Settings::get_settings_pages();
 		$pages         = array();
 		foreach ( $setting_pages as $setting_page ) {