1 files changed, 71 insertions, 2 deletions
diff --git a/src/components/SettingsPage.vue b/src/components/SettingsPage.vue
index b3174bf..da10500 100644
--- a/src/components/SettingsPage.vue
+++ b/src/components/SettingsPage.vue
@@ -1,13 +1,82 @@
 <template>
-  <v-file-input show-size label="Wallpaper"></v-file-input>
+  <v-card class="mx-auto" variant="outlined" max-height="500">
+    <v-card-title class="text-h5 font-weight-regular align-center">
+      <span>{{ currentTitle }}</span>
+    </v-card-title>
+    <v-window v-model="location" show-arrows="hover">
+      <v-window-item :value="1">
+        <v-card-text>
+          <v-container fluid>
+            <v-row>
+              <v-col>
+                <v-card-text>Title Size: {{ titleSize }}px</v-card-text>
+                <v-slider
+                  v-model="titleSize"
+                  :min="25"
+                  :max="35"
+                  step="1"
+                ></v-slider>
+              </v-col>
+              <v-col>
+                <v-card-text>Content Size</v-card-text>
+                <v-radio-group v-model="contentSize" column>
+                  <v-radio label="text-h4" value="text-h4"></v-radio>
+                  <v-radio label="text-h5" value="text-h5"></v-radio>
+                  <v-radio label="text-h6" value="text-h6"></v-radio>
+                </v-radio-group>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+      </v-window-item>
+      <v-window-item :value="2">
+        <v-card-text>
+          <span class="text-h2">Card {{ n }}</span>
+        </v-card-text>
+      </v-window-item>
+    </v-window>
+  </v-card>
 </template>
 
 <script>
 export default {
   name: "SettingsPage",
+  props: ["realTitleSize", "realContentSize"],
+  emits: ["updateTitleSize", "updateContentSize"],
+
+  computed: {
+    currentTitle() {
+      switch (this.location) {
+        case 1:
+          return "MainPage Settings";
+        default:
+          return "About Otonashi";
+      }
+    },
+  },
+
+  watch: {
+    // eslint-disable-next-line no-unused-vars
+    titleSize(s, _) {
+      this.$emit("updateTitleSize", s);
+    },
+    // eslint-disable-next-line no-unused-vars
+    contentSize(s, _) {
+      this.$emit("updateContentSize", s);
+    },
+  },
+
+  mounted() {
+    // Sync titleSize with realTitleSize
+    this.titleSize = this.realTitleSize;
+    // Same
+    this.contentSize = this.realContentSize;
+  },
 
   data: () => ({
-    //
+    titleSize: 35,
+    contentSize: "text-h5",
+    location: 1,
   }),
 };
 </script>