feat: use nuxt layout

app/app.vue

@@ -1,30 +1,3 @@
-<script setup lang="ts">
-const showStats = ref(false);
-</script>
-
 <template>
-  <div
+  <NuxtPage />
-    :style="{
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '4px',
-    }"
-  >
-    <div :style="{ display: 'flex', alignItems: 'center', gap: '4px' }">
-      <input id="statsCheckbox" v-model="showStats" type="checkbox" />
-      <label for="statsCheckbox">Stats</label>
-    </div>
-
-    <div>
-      <HomeTopScreen>
-        <Stats v-if="showStats" />
-      </HomeTopScreen>
-    </div>
-    <div>
-      <Screen>
-        <HomeBottomScreen />
-        <Stats v-if="showStats" />
-      </Screen>
-    </div>
-  </div>
 </template>

app/components/Home/TopScreen/TopScreen.vue

@@ -1,10 +1,6 @@
 <template>
-  <Screen>
   <HomeTopScreenBackground />
   <HomeTopScreenCalendar />
   <HomeTopScreenClock />
   <HomeTopScreenStatusBar />
-
-    <slot />
-  </Screen>
 </template>

app/layouts/default.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const showStats = useState("showStats", () => false);
+</script>
+
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4px',
+    }"
+  >
+    <div :style="{ display: 'flex', alignItems: 'center', gap: '4px' }">
+      <input id="statsCheckbox" v-model="showStats" type="checkbox" />
+      <label for="statsCheckbox">Stats</label>
+    </div>
+
+    <div>
+      <Screen>
+        <slot name="top">
+          <slot />
+        </slot>
+        <Stats v-if="showStats" />
+      </Screen>
+    </div>
+    <div>
+      <Screen>
+        <slot name="bottom">
+          <slot />
+        </slot>
+        <Stats v-if="showStats" />
+      </Screen>
+    </div>
+  </div>
+</template>

app/pages/contact.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <template #top> </template>
+
+    <template #bottom> </template>
+  </NuxtLayout>
+</template>

app/pages/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <template #top>
+      <HomeTopScreen />
+    </template>
+
+    <template #bottom>
+      <HomeBottomScreen />
+    </template>
+  </NuxtLayout>
+</template>