AzuTear
69 lines
2.7 KiB
Vue
69 lines
2.7 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div
|
|
v-if="open"
|
|
class="fixed inset-0 z-[120] flex items-center justify-center bg-[#25123f]/70 px-4 py-8 backdrop-blur-sm"
|
|
@click.self="$emit('close')"
|
|
>
|
|
<div class="max-h-[88vh] w-full max-w-4xl overflow-hidden rounded-[34px] border border-violet-100 bg-white shadow-[0_34px_100px_rgba(38,18,63,0.35)]">
|
|
<div class="flex items-start justify-between gap-4 border-b border-violet-100 bg-gradient-to-r from-[#f8f2ff] via-white to-[#fff1f8] px-7 py-6">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">FAQ Preview</p>
|
|
<h3 class="mt-2 text-xl font-bold text-slate-900">Häufige Fragen</h3>
|
|
<p class="mt-2 text-sm text-slate-500">{{ visibleFaq.length }} Fragen in der Vorschau</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-violet-100 text-violet-600 transition hover:bg-violet-200"
|
|
aria-label="Preview schließen"
|
|
@click="$emit('close')"
|
|
>
|
|
<X class="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
<div class="max-h-[calc(88vh-140px)] overflow-y-auto bg-[radial-gradient(circle_at_top,#f7ecff_0%,#ffffff_48%,#f7f1ff_100%)] px-7 py-6 text-sm leading-7 text-slate-600">
|
|
<div v-if="visibleFaq.length" class="grid gap-3">
|
|
<article
|
|
v-for="(item, index) in visibleFaq"
|
|
:key="`${item.question}-${index}`"
|
|
class="rounded-[22px] border border-violet-50 bg-white/90 px-5 py-4 shadow-sm"
|
|
>
|
|
<p class="text-xs font-bold uppercase tracking-[0.18em] text-violet-500">Frage {{ index + 1 }}</p>
|
|
<h4 class="mt-2 text-base font-bold leading-6 text-slate-950">{{ item.question }}</h4>
|
|
<p class="mt-3 whitespace-pre-line text-sm font-medium leading-7 text-slate-600">{{ item.answer }}</p>
|
|
</article>
|
|
</div>
|
|
<p v-else class="rounded-[18px] border border-amber-100 bg-amber-50 px-4 py-3 font-semibold text-amber-800">
|
|
Noch keine vollständigen FAQ-Einträge hinterlegt.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { X } from '@lucide/vue'
|
|
import { computed } from 'vue'
|
|
|
|
import type { FaqFormItem } from './adminContentTypes'
|
|
|
|
const props = defineProps<{
|
|
open: boolean
|
|
faq: FaqFormItem[]
|
|
}>()
|
|
|
|
defineEmits<{
|
|
close: []
|
|
}>()
|
|
|
|
const visibleFaq = computed(() =>
|
|
props.faq
|
|
.map((item) => ({
|
|
question: item.question.trim(),
|
|
answer: item.answer.trim(),
|
|
}))
|
|
.filter((item) => item.question && item.answer),
|
|
)
|
|
</script>
|