Fix error page nits

This commit is contained in:
2025-04-27 21:34:44 +03:00
parent 6d5979ff67
commit f03d584240
2 changed files with 45 additions and 36 deletions

View File

@@ -3,34 +3,41 @@ const error = useError();
</script> </script>
<template> <template>
<UContainer class="max-w-lg p-8 md:p-16"> <UApp>
<UCard> <UContainer class="max-w-lg p-8 md:p-16">
<div class="grid gap-4"> <UCard>
<div class="text-center font-bold text-4xl md:text-6xl"> <div class="grid gap-4">
{{ error?.statusCode }} <div class="text-center font-bold text-4xl md:text-6xl">
</div> {{ error?.statusCode }}
<NuxtImg </div>
src="https://images.unsplash.com/photo-1644365977963-e96e883a8e74?q=80&w=512&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" <NuxtImg
/> class="rounded"
src="https://plus.unsplash.com/premium_photo-1738036169480-086c0030803c?q=80&w=512&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
<div class="text-center">Uh oh... Something went super wrong.</div>
<div class="text-center font-mono p-4 bg-neutral-100 text-sm">
{{ error?.message }}
</div>
</div>
<template #footer>
<div class="w-full flex justify-center">
<UButton
label="Navigate back home"
to="/"
icon="heroicons:arrow-left"
/> />
</div>
</template>
</UCard>
</UContainer>
<AppFooter /> <div class="text-center text-lg">
Uh oh... Something went super wrong.
</div>
<div
class="text-center font-mono p-4 bg-neutral-100 text-sm dark:bg-neutral-800 max-h-32 overflow-y-auto wrap-normal relative"
>
{{ error?.message }}
</div>
</div>
<template #footer>
<div class="w-full flex justify-center">
<UButton
label="Navigate back home"
to="/"
icon="heroicons:arrow-left"
/>
</div>
</template>
</UCard>
</UContainer>
<AppFooter />
</UApp>
</template> </template>

View File

@@ -1,10 +1,12 @@
<template> <template>
<AuthState v-slot="{ loggedIn }"> <UApp>
<Register v-if="!loggedIn" /> <AuthState v-slot="{ loggedIn }">
<template v-if="loggedIn"> <Register v-if="!loggedIn" />
<AppBar /> <template v-if="loggedIn">
<slot /> <AppBar />
<AppFooter /> <slot />
</template> <AppFooter />
</AuthState> </template>
</AuthState>
</UApp>
</template> </template>