AzuTear
79 lines
2.5 KiB
Vue
79 lines
2.5 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">Footer Preview</p>
|
|
<h3 class="mt-2 text-xl font-bold text-slate-900">{{ title }}</h3>
|
|
<p v-if="url" class="mt-2 break-all text-sm text-slate-500">{{ url }}</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="contentHtml"
|
|
class="footer-preview-content rounded-[22px] border border-violet-50 bg-white/90 px-5 py-4 shadow-sm"
|
|
v-html="contentHtml"
|
|
/>
|
|
<p v-else class="rounded-[18px] border border-amber-100 bg-amber-50 px-4 py-3 font-semibold text-amber-800">
|
|
Für diese Footer-Seite ist noch kein Inhalt hinterlegt.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { X } from '@lucide/vue'
|
|
|
|
import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
|
|
|
|
const props = defineProps<{
|
|
open: boolean
|
|
title: string
|
|
url: string
|
|
contentHtml: string
|
|
}>()
|
|
|
|
useBodyScrollLock(() => props.open)
|
|
|
|
defineEmits<{
|
|
close: []
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.footer-preview-content :deep(p) {
|
|
margin: 0 0 0.85rem;
|
|
}
|
|
|
|
.footer-preview-content :deep(p:last-child),
|
|
.footer-preview-content :deep(ul:last-child),
|
|
.footer-preview-content :deep(ol:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.footer-preview-content :deep(ul),
|
|
.footer-preview-content :deep(ol) {
|
|
margin: 0 0 0.85rem 1.25rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.footer-preview-content :deep(li) {
|
|
margin: 0.2rem 0;
|
|
}
|
|
</style>
|