brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds new empty states

Browse Source
This commit is contained in:
Christian Beutel
2025-01-04 17:05:35 +01:00
parent 474e21ae55
commit a704db6366
32 changed files with 306 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/routes/+error.svelte
View File

@@ -1,27 +1,28 @@
<script>
import { page } from "$app/stores";
import errorDark from "$lib/assets/svgs/empty_states/error_dark.svg";
import errorLight from "$lib/assets/svgs/empty_states/error_light.svg";
import { theme } from "$lib/stores/theme_store";
</script>
<svelte:head>
<title>{$page.status} | wanderer</title>
</svelte:head>
<div
class="flex flex-col gap-y-4 items-center justify-center relative"
class="m-auto text-center max-w-md"
style="height: calc(100dvh - 120px); font-size: 4rem"
>
<img
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 aspect-square rounded-xl object-cover"
width="500"
src="/imgs/error.webp"
class="aspect-square rounded-xl mx-auto"
width="300"
src={$theme === "light" ? errorLight : errorDark}
alt="Default error img"
/>
<div
class="z-10 rounded-full p-8 bg-background flex flex-col gap-y-4 items-center"
style="max-width: 400px"
>
<div class="text-center mt-8">
<h1 class="font-bold" style="line-height: 4rem;">
{$page.status}
</h1>
<p class="text-lg text-center">
<p class="text-lg text-center mt-2">
{$page.error?.message}
</p>
</div>