feat(settings): display current settings page

src/features/settings/views/SettingsView.vue

@@ -16,6 +16,7 @@ limitations under the License.
 
 <script setup>
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
+import SettingsPage from '../components/SettingsPage.vue';
 
 import { loadSettingsConfig } from '../utils/settingsParser';
 import { onMounted, ref, watchEffect } from 'vue';
@@ -28,7 +29,7 @@ const router = useRouter();
 
 const settingsLoaded = ref(false)
 const settings = ref([]);
-const activeSectionContent = ref([]);
+const activeSectionContent = ref({});
 const activeSection = ref(null);
 
 watchEffect(() => {
@@ -80,10 +81,13 @@ onMounted(async () => {
                     </li>
                 </ul>
             </template>
-            <div>
+            <div class="settings-main-content">
                 <div v-if="!settingsLoaded">
                     {{ t('loading') }}
                 </div>
+                <div v-else>
+                    <SettingsPage :setting="activeSectionContent" :path="activeSection" />
+                </div>
             </div>
         </LeftSidebarLayout>
     </div>
@@ -127,4 +131,8 @@ onMounted(async () => {
     font-size: 1rem;
     display: block;
 }
+
+.settings-main-content {
+    padding: 0 30%;
+}
 </style>