From 7840856858fdc1c983a2078dfe67eb6b36cbe6b5 Mon Sep 17 00:00:00 2001
From: s1lvax <s1lvax@proton.me>
Date: Sat, 12 Oct 2024 12:00:50 +0200
Subject: [PATCH] Add error page for user not found / fix #17

---
 src/lib/components/UserNotFoundError.svelte | 24 +++++++++++++++++++++
 src/routes/[username]/+error.svelte         |  5 +++++
 2 files changed, 29 insertions(+)
 create mode 100644 src/lib/components/UserNotFoundError.svelte
 create mode 100644 src/routes/[username]/+error.svelte

diff --git a/src/lib/components/UserNotFoundError.svelte b/src/lib/components/UserNotFoundError.svelte
new file mode 100644
index 0000000..b8a89c6
--- /dev/null
+++ b/src/lib/components/UserNotFoundError.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+</script>
+
+<div class="flex min-h-screen items-center justify-center p-6">
+	<div class="flex flex-col items-center space-y-4">
+		<img src="https://http.cat/404.jpg" alt="404 cat" class="w-full max-w-xs" />
+		<Card.Root class="w-full max-w-lg">
+			<Card.Header class="pb-2">
+				<Card.Title class="text-4xl font-bold">User Not Found 🤓</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<p class="text-sm text-muted-foreground">
+					The user you are looking for does not exist. But hey, don’t feel left out!
+					<span class="font-semibold">Is this you?</span>
+					<a href="/signup" class="text-blue-600 hover:underline"> Create your account here! </a>
+				</p>
+				<p class="mt-4 text-sm text-muted-foreground">
+					Or, you know, keep doing whatever you were doing when you stumbled upon this page. 🤷‍♂️
+				</p>
+			</Card.Content>
+		</Card.Root>
+	</div>
+</div>
diff --git a/src/routes/[username]/+error.svelte b/src/routes/[username]/+error.svelte
new file mode 100644
index 0000000..0b2b739
--- /dev/null
+++ b/src/routes/[username]/+error.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import UserNotFoundError from '$lib/components/UserNotFoundError.svelte';
+</script>
+
+<UserNotFoundError />