From e183d3ddeb68212fcec225038314209f3bce8afa Mon Sep 17 00:00:00 2001
From: Sosokker <sirinza29@gmail.com>
Date: Sun, 3 Nov 2024 00:39:13 +0700
Subject: [PATCH] feat: add loading, error, not found page

---
 src/app/error.tsx     | 19 +++++++++++++++++++
 src/app/loading.tsx   | 22 ++++++++++++++++++++++
 src/app/not-found.tsx | 23 +++++++++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 src/app/error.tsx
 create mode 100644 src/app/loading.tsx
 create mode 100644 src/app/not-found.tsx

diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 0000000..5d0fe46
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+interface ErrorProps {
+  error: Error;
+  reset: () => void;
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  return (
+    <main className="flex justify-center items-center flex-col gap-6">
+      <h1 className="text-3xl font-semibold">Something went wrong!</h1>
+      <p className="text-lg">{error.message}</p>
+
+      <button className="inline-block bg-accent-500 text-primary-800 px-6 py-3 text-lg" onClick={reset}>
+        Try again
+      </button>
+    </main>
+  );
+}
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..97af30b
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,22 @@
+export default function Loading() {
+  return (
+    <div className="container flex items-center justify-center h-screen">
+      <div className="text-center">
+        <svg
+          className="animate-spin h-12 w-12 text-gray-600 mx-auto mb-4"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291l-2.832 2.832A10.003 10.003 0 0112 22v-4a8.001 8.001 0 01-6-5.709z"
+          ></path>
+        </svg>
+        <p className="text-lg font-semibold text-gray-600">Loading data...</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..6c41fcd
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+function NotFound() {
+  return (
+    <main className="flex flex-col items-center justify-center min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
+      <div className="max-w-md text-center p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
+        <h1 className="text-4xl font-bold mb-4">404</h1>
+        <h2 className="text-2xl font-semibold mb-4">This page could not be found :(</h2>
+        <p className="mb-6 text-gray-600 dark:text-gray-400">
+          Sorry, the page you are looking for does not exist or has been moved.
+        </p>
+        <Link
+          href="/"
+          className="inline-block bg-accent-500 text-primary-800 px-8 py-4 text-lg font-medium rounded transition duration-200 hover:bg-accent-600 dark:bg-accent-400 dark:text-primary-800 dark:hover:bg-accent-500"
+        >
+          Go back home
+        </Link>
+      </div>
+    </main>
+  );
+}
+
+export default NotFound;