✨ Adds dashboard ui

web/pages/index.vue

@@ -1,24 +1,100 @@
 <template>
-    <main class="flex items-center justify-center min-w-screen min-h-screen">
+    <main
-        <UButton
+        class="flex items-center justify-center min-w-screen min-h-screen gap-4 flex-wrap"
-            icon="material-symbols:lock"
-            size="xl"
-            color="primary"
-            variant="solid"
     >
-            Lock
+        <div class="flex items-center justify-center flex-col gap-y-2 w-32">
+            <div
+                :class="`flex items-center justify-center border-solid border-2 border-${open ? (locked ? 'error' : 'secondary') : 'primary'} rounded-lg w-full h-32`"
+            >
+                <UIcon
+                    :name="
+                        open
+                            ? 'material-symbols:door-open'
+                            : 'material-symbols:door-front'
+                    "
+                    class="size-12 !w-16 !h-16"
+                />
+            </div>
+
+            <p
+                :class="`flex items-center justify-center text-${open ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10`"
+            >
+                {{ open ? "Opened" : "Closed" }}
+            </p>
+        </div>
+
+        <div class="flex items-center justify-center flex-col gap-y-2 w-32">
+            <div
+                :class="`flex items-center justify-center border-solid border-2 border-${locked ? 'primary' : 'secondary'} rounded-lg w-full h-32`"
+            >
+                <UIcon
+                    :name="
+                        locked
+                            ? 'material-symbols:lock'
+                            : 'material-symbols:lock-open'
+                    "
+                    class="size-12 !w-16 !h-16"
+                />
+            </div>
+
+            <UButton
+                :icon="
+                    locked
+                        ? 'material-symbols:lock-open'
+                        : 'material-symbols:lock'
+                "
+                size="xl"
+                :color="locked ? 'primary' : 'secondary'"
+                variant="solid"
+                class="flex items-center justify-center w-full h-10"
+                @click="() => (locked = !locked)"
+            >
+                {{ locked ? "Unlock" : "Lock" }}
             </UButton>
+        </div>
+
+        <div class="flex items-center justify-center flex-col gap-y-2 w-32">
+            <div
+                :class="`flex items-center justify-center border-solid border-2 border-${alert ? 'primary' : 'secondary'} rounded-lg w-full h-32`"
+            >
+                <UIcon
+                    :name="
+                        alert
+                            ? 'material-symbols:volume-up'
+                            : 'material-symbols:volume-off'
+                    "
+                    class="size-12 !w-16 !h-16"
+                />
+            </div>
+
+            <UButton
+                :icon="
+                    alert
+                        ? 'material-symbols:volume-off'
+                        : 'material-symbols:volume-up'
+                "
+                size="xl"
+                :color="alert ? 'primary' : 'secondary'"
+                variant="solid"
+                class="flex items-center justify-center w-full h-10"
+                @click="() => (alert = !alert)"
+            >
+                {{ alert ? "Turn off" : "Turn on" }}
+            </UButton>
+        </div>
     </main>
 </template>
 
 <script lang="ts" setup>
-const token = useToken();
+const token = useToken()
-const locked = true;
+const open = ref(true)
+const locked = ref(true)
+const alert = ref(false)
 
 onMounted(() => {
     if (!token.value) {
-        return navigateTo("/token");
+        return navigateTo("/token")
     }
-    console.log(token.value);
+    console.log(token.value)
-});
+})
 </script>

web/pages/token.vue

@@ -14,7 +14,7 @@
                 />
             </UFormField>
 
-            <UButton type="submit" size="xl"> Submit</UButton>
+            <UButton type="submit" size="xl"> Submit </UButton>
         </UForm>
     </main>
 </template>