From 139c36a85091e94148dd7990d06de4de8260db90 Mon Sep 17 00:00:00 2001
From: pompydev <pompydev@proton.me>
Date: Mon, 17 Mar 2025 23:07:23 +0900
Subject: [PATCH] refactor out ThemeController

---
 apps/rank/app.vue                        | 24 +++++++-----------------
 apps/rank/components/ThemeController.vue | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 apps/rank/components/ThemeController.vue

diff --git a/apps/rank/app.vue b/apps/rank/app.vue
index 01901f9..98976f1 100644
--- a/apps/rank/app.vue
+++ b/apps/rank/app.vue
@@ -1,21 +1,11 @@
-<script setup>
-const colorMode = useColorMode()
-</script>
-
 <template>
-    <div class="min-h-screen bg-white dark:bg-gray-800 dark:text-gray-200">
-        <p class="p-4 pb-2">
-            <select
-                v-model="colorMode.preference"
-                class="h-8 w-24 border dark:border-gray-700 dark:bg-gray-900 dark:text-white"
-            >
-                <option value="system">System</option>
-                <option value="light">Light</option>
-                <option value="dark">Dark</option>
-            </select>
-        </p>
-        <NuxtPage class="mx-auto p-4" />
-    </div>
+    <ThemeController />
+
+    <main class="">
+        <div class="mx-auto max-w-screen-mobile">
+            <NuxtPage />
+        </div>
+    </main>
 </template>
 
 <style>
diff --git a/apps/rank/components/ThemeController.vue b/apps/rank/components/ThemeController.vue
new file mode 100644
index 0000000..0b5b694
--- /dev/null
+++ b/apps/rank/components/ThemeController.vue
@@ -0,0 +1,16 @@
+<script setup>
+const colorMode = useColorMode()
+</script>
+
+<template>
+    <p class="p-4 pb-2">
+        <select
+            v-model="colorMode.preference"
+            class="h-8 w-24 border dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+        >
+            <option value="system">System</option>
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+        </select>
+    </p>
+</template>