feat:#20 added settings page

frontend/src/view/SettingsView.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+
+import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
+import {ref} from "vue";
+import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
+
+const icon = "pi pi-cog";
+const isDark = ref(true);
+
+function handleDarkModeToggled(isDarkVar: boolean) {
+  // Do something with isDark value
+  // For example, update the root isDark value
+  // Assuming the root component has an isDark ref
+  isDark.value = isDarkVar;
+}
+
+</script>
+
+<template>
+  <div class="flex flex-column align-items-center mt-0">
+    <div
+        class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown md:mt-8"
+    >
+      <h3 class="text-4xl">
+        {{ $t('settings.headline') }}
+      </h3>
+      <i v-if="icon" :class="icon" style="font-size: 2rem"></i>
+    </div>
+    <div v-if="$t('settings.subTitle')" class="flex justify-content-center">
+      <h5 class="text-2xl m-2">{{ $t('settings.subTitle') }}</h5>
+    </div>
+    <div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
+      <slot name="selection" flex-specs="flex-1 m-0"></slot>
+    </div>
+    <div
+                :class="[
+              'opacity-100',
+              'transition-all',
+              'transition-duration-500',
+              'transition-ease-in-out',
+                   'w-full',
+        'lg:w-8',
+      ]"
+    >
+
+        <DarkModeSwitcher
+            @dark-mode-toggled="handleDarkModeToggled"
+        ></DarkModeSwitcher>
+        <LocaleSwitcher></LocaleSwitcher>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>