scrum-poker-internal/resources/js/components/rooms/RoomRetentionNotice.vue

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

import { login, register } from '@/routes';
import type { RoomRetentionNoticeProps } from '@/types/room';

defineProps<RoomRetentionNoticeProps>();

const dismissed = ref(false);
</script>

<template>
    <aside
        v-if="!dismissed"
        class="mx-auto mb-5 flex max-w-6xl flex-col gap-4 rounded-lg border border-dashed border-slate-500 bg-slate-800 p-4 text-sm text-slate-100 sm:flex-row sm:items-center"
        role="status"
    >
        <div class="min-w-0 flex-1">
            <p class="font-semibold">Speichere diesen Raum in deinem Konto</p>
            <p class="mt-1 text-slate-300">
                Als Gast wird der Raum nach
                {{ notice.guest_retention_days }} Tagen Inaktivität geschlossen.
                Nach der Anmeldung bleibt er in deinem Dashboard gespeichert und
                die Frist beträgt {{ notice.account_retention_days }} Tage.
            </p>
        </div>

        <div class="flex shrink-0 items-center gap-3 font-semibold sm:ml-auto">
            <Link :href="login()" class="underline underline-offset-4">
                Anmelden
            </Link>
            <Link :href="register()" class="underline underline-offset-4">
                Registrieren
            </Link>
            <button
                type="button"
                class="ml-1 grid size-8 place-items-center rounded-md text-slate-300 transition hover:bg-slate-700 hover:text-white"
                aria-label="Hinweis schließen"
                @click="dismissed = true"
            >
                <X class="size-4" />
            </button>
        </div>
    </aside>
</template>