start putting things in better spots

app.vue

@@ -1,59 +1,10 @@
 <template>
-  <select
-    v-model='selectedFont'
-    :disabled='loading'
-    @change='updateFont'
-  >
-    <option
-      v-for='(value, key) in fonts'
-      :key='key'
-      :value='key'
-    >
-      {{ value.name }}
-    </option>
-  </select>
-  <select
-    v-model='selectedTheme'
-    :disabled='loading'
-    @change='updateTheme'
-  >
-    <option
-      v-for='(value, key) in themes'
-      :key='key'
-      :value='key'
-    >
-      {{ value.name }}
-    </option>
-  </select>
+  <NavBar />
   <NuxtRouteAnnouncer />
   <NuxtPage />
 </template>
 
 <script setup>
-import { themes } from '~/types/themes'
-import { fonts } from '~/types/fonts'
-
-const { theme, setTheme } = useTheme()
-const selectedTheme = ref('')
-
-const { font, setFont } = useFont()
-const selectedFont = ref('')
-const loading = ref(true)
-
-onMounted(() => {
-  selectedTheme.value = theme.value
-  selectedFont.value = font.value
-  loading.value = false
-})
-
-const updateTheme = () => {
-  setTheme(selectedTheme.value)
-}
-
-const updateFont = () => {
-  setFont(selectedFont.value)
-}
-
 useHead({
   bodyAttrs: {
     class: 'bg-bg',

components/FontSwitcher.vue

@@ -0,0 +1,28 @@
+<template>
+  <select
+    v-model='selectedFont'
+    :disabled='loading'
+    @change='updateFont'
+  >
+    <option
+      v-for='(value, key) in fonts'
+      :key='key'
+      :value='key'
+    >
+      {{ value.name }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+const { font, setFont } = useFont()
+const selectedFont = ref('')
+const loading = ref(true)
+
+onMounted(() => {
+  selectedFont.value = font.value
+  loading.value = false
+})
+
+const updateFont = () => setFont(selectedFont.value)
+</script>

components/NavBar.vue

@@ -0,0 +1,4 @@
+<template>
+  <FontSwitcher />
+  <ThemeSwitcher />
+</template>

components/ThemeSwitcher.vue

@@ -0,0 +1,30 @@
+<template>
+  <select
+    v-model='selectedTheme'
+    :disabled='loading'
+    @change='updateTheme'
+  >
+    <option
+      v-for='(value, key) in themes'
+      :key='key'
+      :value='key'
+    >
+      {{ value.name }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+const { theme, setTheme } = useTheme()
+const selectedTheme = ref('')
+const loading = ref(true)
+
+onMounted(() => {
+  selectedTheme.value = theme.value
+  loading.value = false
+})
+
+const updateTheme = () => {
+  setTheme(selectedTheme.value)
+}
+</script>

composables/useFont.ts

@@ -1,5 +1,4 @@
 import { ref, onMounted } from 'vue'
-import { fonts } from '~/types/fonts'
 
 const fontNames = Object.keys(fonts)
 

composables/useTheme.ts

@@ -1,5 +1,4 @@
 import { ref, onMounted } from 'vue'
-import { themes } from '~/types/themes'
 
 const themeNames = Object.keys(themes)
 

eslint.config.mjs

@@ -1,10 +1,6 @@
 // @ts-check
 import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default withNuxt(
-  // Your custom configs here
-).override('nuxt/stylistic', {
-  rules: {
+export default withNuxt().overrideRules({
   'vue/html-quotes': ['error', 'single'],
-  },
 })

nuxt.config.ts

@@ -1,4 +1,4 @@
-import { fonts } from './types/fonts'
+import { fonts } from './utils/fonts'
 
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',

pages/about.vue

@@ -4,9 +4,7 @@ const route = useRoute()
 
 <template>
   <div>
-    <h1>
-      Nuxt Routing set up successfully!
-    </h1>
+    <h1>Nuxt Routing set up successfully!</h1>
     <p>Current route: {{ route.path }}</p>
     <a
       href='https://nuxt.com/docs/getting-started/routing'

pages/index.vue

@@ -1,14 +1,7 @@
-<script setup lang="ts">
-const route = useRoute()
-</script>
-
 <template>
   <div>
     <h1 c-text>
-      Nuxt Routing set up successfully!
+      hi im mard
     </h1>
-    <p c-subtext>
-      Current route: {{ route.path }}
-    </p>
   </div>
 </template>

uno.config.ts

@@ -10,7 +10,7 @@ import {
 } from 'unocss'
 import type { Theme } from 'unocss/preset-uno'
 import presetTheme from 'unocss-preset-theme'
-import { themesWithoutName } from '~/types/themes'
+import { themesWithoutName } from '~/utils/themes'
 
 export default defineConfig<Theme>({
   theme: themesWithoutName['catppuccin-mocha'],