AzuTear
85 lines
3.7 KiB
Vue
85 lines
3.7 KiB
Vue
<template>
|
|
<div class="space-y-5">
|
|
<div class="rounded-[24px] border border-violet-100 bg-violet-50/50 p-4 text-sm leading-6 text-slate-600">
|
|
Diese Texte steuern direkt die beiden Landingpage-Bereiche <strong class="text-slate-900">Die Awards</strong> und
|
|
<strong class="text-slate-900">Unterkategorien</strong>.
|
|
</div>
|
|
|
|
<section class="rounded-[24px] border border-violet-100 bg-white/86 p-5">
|
|
<div class="mb-4">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-violet-500">Landingpage</p>
|
|
<h3 class="mt-1 text-lg font-bold text-slate-900">Die Awards</h3>
|
|
</div>
|
|
<div class="grid gap-4">
|
|
<label class="space-y-2">
|
|
<span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Titel</span>
|
|
<input
|
|
v-model="form.awardsSectionTitle"
|
|
type="text"
|
|
class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
|
|
placeholder="Titel für den Awards-Bereich"
|
|
/>
|
|
</label>
|
|
<label class="space-y-2">
|
|
<span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Beschreibung</span>
|
|
<textarea
|
|
v-model="form.awardsSectionDescription"
|
|
class="min-h-28 w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
|
|
placeholder="Einleitungstext für die Hauptkategorien"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="rounded-[24px] border border-violet-100 bg-white/86 p-5">
|
|
<div class="mb-4">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-violet-500">Landingpage</p>
|
|
<h3 class="mt-1 text-lg font-bold text-slate-900">Unterkategorien</h3>
|
|
</div>
|
|
<div class="grid gap-4">
|
|
<label class="space-y-2">
|
|
<span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Titel</span>
|
|
<input
|
|
v-model="form.subcategoriesSectionTitle"
|
|
type="text"
|
|
class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
|
|
placeholder="Titel für den Unterkategorien-Bereich"
|
|
/>
|
|
</label>
|
|
<label class="space-y-2">
|
|
<span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Beschreibung</span>
|
|
<textarea
|
|
v-model="form.subcategoriesSectionDescription"
|
|
class="min-h-28 w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
|
|
placeholder="Einleitungstext für die Unterkategorien"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="flex justify-end">
|
|
<Button :disabled="saving" size="sm" class="gap-2 rounded-2xl bg-gradient-to-r from-violet-600 to-fuchsia-500 shadow-violet-500/20" @click="onSave">
|
|
<Save class="h-4 w-4" />
|
|
{{ saving ? 'Speichert ...' : 'Awards-Bereich speichern' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Save } from '@lucide/vue'
|
|
|
|
import Button from '../ui/Button.vue'
|
|
import type { AdminContentForm } from './adminContentTypes'
|
|
|
|
const props = defineProps<{
|
|
form: AdminContentForm
|
|
saving: boolean
|
|
saveSiteSettings: (sectionLabel?: string) => Promise<void>
|
|
}>()
|
|
|
|
function onSave() {
|
|
return props.saveSiteSettings('Awards & Unterkategorien')
|
|
}
|
|
</script>
|