72 lines
2.1 KiB
Vue
Executable File
72 lines
2.1 KiB
Vue
Executable File
<template>
|
||
<div class="min-h-screen bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
<div class="mb-6">
|
||
<h1 class="text-3xl font-display font-bold text-gray-900">
|
||
Inhalte verwalten
|
||
</h1>
|
||
<p class="mt-1 text-sm text-gray-500">
|
||
Redaktionelle Inhalte der Website bearbeiten
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tabs -->
|
||
<div class="border-b border-gray-200 mb-6">
|
||
<nav
|
||
class="-mb-px flex space-x-8 overflow-x-auto"
|
||
aria-label="Tabs"
|
||
>
|
||
<button
|
||
v-for="tab in tabs"
|
||
:key="tab.id"
|
||
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
|
||
:class="activeTab === tab.id
|
||
? 'border-primary-600 text-primary-600'
|
||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
||
@click="activeTab = tab.id"
|
||
>
|
||
{{ tab.label }}
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Tab Content -->
|
||
<div>
|
||
<CmsUeberUns v-if="activeTab === 'ueber-uns'" />
|
||
<CmsGeschichte v-if="activeTab === 'geschichte'" />
|
||
<CmsTtRegeln v-if="activeTab === 'tt-regeln'" />
|
||
<CmsSatzung v-if="activeTab === 'satzung'" />
|
||
<CmsLinks v-if="activeTab === 'links'" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import CmsUeberUns from '~/components/cms/CmsUeberUns.vue'
|
||
import CmsGeschichte from '~/components/cms/CmsGeschichte.vue'
|
||
import CmsTtRegeln from '~/components/cms/CmsTtRegeln.vue'
|
||
import CmsSatzung from '~/components/cms/CmsSatzung.vue'
|
||
import CmsLinks from '~/components/cms/CmsLinks.vue'
|
||
|
||
definePageMeta({
|
||
middleware: 'auth',
|
||
layout: 'default'
|
||
})
|
||
|
||
useHead({
|
||
title: 'Inhalte verwalten – CMS'
|
||
})
|
||
|
||
const activeTab = ref('ueber-uns')
|
||
|
||
const tabs = [
|
||
{ id: 'ueber-uns', label: 'Über uns' },
|
||
{ id: 'geschichte', label: 'Geschichte' },
|
||
{ id: 'tt-regeln', label: 'TT-Regeln' },
|
||
{ id: 'satzung', label: 'Satzung' },
|
||
{ id: 'links', label: 'Links' }
|
||
]
|
||
</script>
|