scrum-poker-internal/resources/js/pages/embedded/Error.vue

<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { CircleAlert } from '@lucide/vue';

import { login } from '@/routes';

defineProps<{
    message: string;
    showLoginAction: boolean;
}>();
</script>

<template>
    <Head title="Scrum Poker nicht verfügbar" />

    <main
        class="grid min-h-svh place-items-center bg-slate-900 p-8 text-slate-100"
    >
        <section
            class="flex max-w-lg flex-col items-center gap-4 rounded-2xl border border-slate-700 bg-slate-800 p-8 text-center shadow-xl"
        >
            <CircleAlert class="size-10 text-amber-300" />
            <h1 class="text-2xl font-bold">Raum kann nicht geöffnet werden</h1>
            <p class="text-slate-300">{{ message }}</p>
            <Link
                v-if="showLoginAction"
                :href="login()"
                class="inline-flex rounded-lg bg-white px-4 py-2 font-semibold text-slate-900 transition hover:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
            >
                Anmelden
            </Link>
            <p class="text-sm text-slate-400">
                Bitte ändere Raumcode oder Anzeigename auf der Home-Seite der
                Fillibri Hub App und öffne Scrum Poker erneut.
            </p>
        </section>
    </main>
</template>