settings Sceleton

src/components/admin/management/setting/AppSetting.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-col w-full">
+    <div class="border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
+      <p class="text-lg font-semibold">Anwendungs Einstellungen</p>
+    </div>
+    <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
+      <input type="text" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({});
+</script>

src/components/admin/management/setting/BackupSetting.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-col w-full">
+    <div class="border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
+      <p class="text-lg font-semibold">Backup Einstellungen</p>
+    </div>
+    <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
+      <input type="text" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({});
+</script>

src/components/admin/management/setting/ClubSetting.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-col w-full">
+    <div class="border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
+      <p class="text-lg font-semibold">Vereins Einstellungen</p>
+    </div>
+    <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
+      <input type="text" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({});
+</script>

src/components/admin/management/setting/MailSetting.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-col w-full">
+    <div class="border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
+      <p class="text-lg font-semibold">E-Mail Einstellungen</p>
+    </div>
+    <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
+      <input type="text" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({});
+</script>

src/components/admin/management/setting/SessionSetting.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-col w-full">
+    <div class="border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
+      <p class="text-lg font-semibold">Login-Session Einstellungen</p>
+    </div>
+    <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
+      <input type="text" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({});
+</script>

src/views/admin/management/setting/Setting.vue

@@ -5,10 +5,12 @@
         <h1 class="font-bold text-xl h-8">Einstellungen</h1>
       </div>
     </template>
-    <template #diffMain>
+    <template #main>
-      <div class="flex flex-col gap-4 h-full pl-7">
+      <ClubSetting />
-        <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">Einstellungen</div>
+      <AppSetting />
-      </div>
+      <MailSetting />
+      <SessionSetting />
+      <BackupSetting />
     </template>
   </MainTemplate>
 </template>
@@ -19,6 +21,11 @@ import { mapState, mapActions } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { useAbilityStore } from "@/stores/ability";
 import { useSettingStore } from "@/stores/admin/management/setting";
+import ClubSetting from "@/components/admin/management/setting/ClubSetting.vue";
+import AppSetting from "@/components/admin/management/setting/AppSetting.vue";
+import MailSetting from "@/components/admin/management/setting/MailSetting.vue";
+import SessionSetting from "@/components/admin/management/setting/SessionSetting.vue";
+import BackupSetting from "@/components/admin/management/setting/BackupSetting.vue";
 </script>
 
 <script lang="ts">