.

src-js/components/App.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="container m-auto">
-        <v-wifi />
+        <h1>Configuration Manager</h1>
+
+        <v-wifi class="mb-8"/>
 
         <v-settings />
     </div>

src-js/components/Settings.vue

@@ -1,14 +1,14 @@
 <template>
     <div>
-        App settings
+        <h2>App settings</h2>
 
         <div v-for="group in groups" :key="`settings-group-${group.name}`">
             <v-settings-group :group="group" />
         </div>
 
-        <div>
-            <button class="">Reset</button>
-            <button class="">Save</button>
+        <div class="text-right">
+            <button class="btn --secondary mr-4">Reset</button>
+            <button class="btn --primary ">Save</button>
         </div>
     </div>
 </template>

src-js/components/SettingsGroup.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="">
-        {{ group.label }}
+    <div class="settings-group">
+        <h3>{{ group.label }}</h3>
 
         <p>
             {{ group.description }}
@@ -11,7 +11,7 @@
             :key="`settings-group-${group.name}-${param.name}`"
             class=""
         >
-            <v-settings-param param="param" value="123"/>
+            <v-settings-param :param="param" value="123"/>
         </div>
     </div>
 </template>

src-js/components/SettingsParam.vue

@@ -1,6 +1,11 @@
 <template>
-    <div class="">
-        <input type="text" v-model="value" class="border"/>
+    <div v-if="param.type === 'bool'">
+        <input type="checkbox"/>
+        <label>{{ param.label }}</label>
+    </div>
+    <div v-else class="form-group">
+        <label>{{ param.label }}</label>
+        <input type="text" v-model="value" class="form-control"/>
     </div>
 </template>
 
@@ -15,6 +20,11 @@ export default {
             type: Number || String || Boolean,
             required: true,
         }
+    },
+    computed: {
+        isTextInput() {
+            return type === 'int' || type === 'string'; 
+        }
     }
 };
 </script>

src-js/components/WiFi.vue

@@ -1,13 +1,30 @@
 <template>
-    <div>
-        wifi settings
+    <div class="">
+        <h2>WiFi settings</h2>
+
+        <p></p>
+
+        <div class="settings-group">
+            <div class="form-group">
+                <label>Access point</label>
+                <input type="text" class="form-control" />
+            </div>
+
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" class="form-control" />
+            </div>
+        </div>
+
+        <div class="text-right">
+            <button v-if="!connected" class="btn --primary">Connect</button>
+            <button v-if="connected" class="btn --primary">Disconnect</button>
+        </div>
     </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
 <style lang="scss">

src-js/css/main.scss

@@ -8,5 +8,25 @@ body {
   @apply h-full bg-white text-base leading-normal text-black font-sans;
 }
 
+.btn {
+  @apply inline-block text-center border px-2 py-1;
+
+  &.--primary {
+
+  }
+
+  &.--secondary {
+
+  }
+}
+
+.form-group {
+  @apply mb-4;
+}
+
+.form-control {
+  @apply block w-full border px-2 py-1;
+}
+
 @tailwind utilities;