initialize settings page

src/components/SettingsView/Components/Switch.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="switch rounded"
+    @click="toggled = !toggled"
+    :class="{ toggled: toggled }"
+  >
+    <div class="circle circular"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const toggled = ref(false);
+</script>
+
+<style lang="scss">
+.switch {
+  height: 2rem;
+  background-color: $gray;
+  width: 3.75rem;
+  padding: $smaller;
+  position: relative;
+  transition: all 0.25s ease;
+
+  .circle {
+    transition: all 0.25s ease;
+    height: 1.5rem;
+    aspect-ratio: 1;
+    background-color: $gray1;
+    position: absolute;
+    left: $smaller;
+  }
+}
+
+.toggled {
+  background-color: $darkblue;
+  transition-delay: 0.15s;
+
+  .circle {
+    background-color: $white;
+    left: calc((100% - ($smaller + 1.5rem)));
+  }
+}
+</style>

src/components/SettingsView/Content.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="settingscontent">
+    <Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    /><Group
+      v-for="(group, index) in settingGroups[current].groups"
+      :key="index"
+      :group="group"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import settingGroups from "@/settings";
+import Group from "./Group.vue";
+
+defineProps<{
+  current: number;
+}>();
+</script>
+
+<style lang="scss">
+.settingscontent {
+  width: 100%;
+  max-width: 40rem;
+  padding-right: 1rem;
+  margin: 0 auto;
+
+
+}
+</style>

src/components/SettingsView/Group.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="settingsgroup">
+    <div>
+      <h4>{{ group.title }}</h4>
+      <div class="desc">{{ group.desc }}</div>
+    </div>
+    <div class="setting rounded bg-black pad-lg">
+      <div v-for="(setting, index) in group.settings" :key="index">
+        <div class="title">
+          {{ setting.title }}
+        </div>
+        <div class="options"><Switch /></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SettingGroup } from "@/interfaces/settings";
+import Switch from "./Components/Switch.vue";
+
+defineProps<{
+  group: SettingGroup;
+}>();
+</script>
+
+<style lang="scss">
+.settingsgroup {
+  display: grid;
+  gap: $small;
+  margin-top: 2rem;
+
+  h4 {
+    margin: $small auto;
+  }
+
+  .desc {
+    opacity: 0.5;
+    font-size: 0.9rem;
+  }
+
+  .setting > * {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+
+    .title {
+      margin: auto 0;
+    }
+  }
+}
+</style>

src/components/SettingsView/Main.vue

@@ -1,3 +0,0 @@
-<template>
-<div class="settings">Hello, settings here 😁</div>
-</template>

src/components/SettingsView/Nav.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="settingsnav">
+    <div class="buttongroup rounded bg-black">
+      <button v-for="(group, index) in settingGroups" :key="index">
+        {{ group.title }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import settingGroups from "@/settings";
+</script>
+
+<style lang="scss">
+.settingsnav {
+  .buttongroup {
+    display: grid;
+    grid-auto-flow: column;
+    width: max-content;
+    margin: 0 auto;
+    overflow: hidden;
+
+    button {
+      padding: 0 1rem;
+      border-radius: 0;
+      width: 5rem;
+    }
+  }
+}
+</style>