src/routes/(app)/+error.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<script>
	import { back } from '$lib/utils';
	import { Icon } from '$comp';
	import { page } from '$app/stores';

	export let data;
	let { user } = data;

	let link = user ? `/${user.username}` : '/';
</script>

<div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
	<div class="w-full flex">
		<a href="/" class="mx-auto">
			<Icon icon="logo" />
		</a>
	</div>

	<div class="flex justify-center items-center">
		<div class="shadow-xl rounded-3xl px-10 pt-5 pb-10 space-y-5 w-full mx-5">
			<div class="relative">
				<h1 class="text-2xl md:text-3xl font-semibold text-center">Error</h1>
			</div>
			<p class="text-secondary text-center">Something went wrong</p>
			<p class="text-secondary text-center">{$page.error.message}</p>

			<div class="flex justify-center py-24">
				<a href={link}>
					<button
						class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 text-xl"
					>
						Back
					</button>
				</a>
			</div>
		</div>
	</div>
</div>