fix: refactored the codebase

resources/js/components/rooms/RoomRetentionNotice.vue

@@ -0,0 +1,47 @@
+<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>