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

<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">
      <div class="w-full">
        <p>Vereins-Icon</p>
        <AppIcon v-if="clubSettings['club.icon'] != ''" class="h-10! max-w-full mx-auto" />
        <div v-else class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm">
          Kein Icon hochgeladen
        </div>
      </div>
      <div class="w-full">
        <p>Vereins-Logo</p>
        <AppLogo v-if="clubSettings['club.logo'] != ''" class="h-10! max-w-full mx-auto" />
        <div v-else class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm">
          Kein Logo hochgeladen
        </div>
      </div>
      <div class="w-full">
        <label for="name">Vereins-Name</label>
        <input id="name" type="text" readonly :value="clubSettings['club.name']" />
      </div>
      <div class="w-full">
        <label for="imprint">Vereins-Impressum Link</label>
        <input id="imprint" type="url" readonly :value="clubSettings['club.imprint']" />
      </div>
      <div class="w-full">
        <label for="icon">Vereins-Datenschutz Link</label>
        <input id="privacy" type="url" readonly :value="clubSettings['club.privacy']" />
      </div>
      <div class="w-full">
        <label for="website">Vereins-Webseite Link</label>
        <input id="website" type="url" readonly :value="clubSettings['club.website']" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import AppIcon from "@/components/AppIcon.vue";
import AppLogo from "@/components/AppLogo.vue";
import { useSettingStore } from "@/stores/admin/management/setting";
import { mapState } from "pinia";
import { defineComponent } from "vue";
</script>

<script lang="ts">
export default defineComponent({
  computed: {
    ...mapState(useSettingStore, ["readByTopic"]),
    clubSettings() {
      return this.readByTopic("club");
    },
  },
});
</script>