feat: add pages

diwashbhattarai999 · May 4, 2024 · 8925f99 · 8925f99
1 parent 6f9150e
commit 8925f99
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 2 deletions.
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
@@ -0,0 +1,5 @@
+const LoginPage = () => {
+  return <div>Login Page</div>;
+};
+
+export default LoginPage;
diff --git a/src/app/(auth)/register/page.tsx b/src/app/(auth)/register/page.tsx
@@ -0,0 +1,5 @@
+const RegisterPage = () => {
+  return <div>Register Page</div>;
+};
+
+export default RegisterPage;
diff --git a/src/app/(main)/about/page.tsx b/src/app/(main)/about/page.tsx
@@ -0,0 +1,9 @@
+import MaxWidthContainer from "@/components/ui/max-width-container";
+
+export default function AboutPage() {
+  return (
+    <MaxWidthContainer>
+      <h1>About Page</h1>
+    </MaxWidthContainer>
+  );
+}
diff --git a/src/app/(main)/blog/page.tsx b/src/app/(main)/blog/page.tsx
@@ -0,0 +1,9 @@
+import MaxWidthContainer from "@/components/ui/max-width-container";
+
+export default function BlogsPage() {
+  return (
+    <MaxWidthContainer>
+      <h1>Blogs Page</h1>
+    </MaxWidthContainer>
+  );
+}
diff --git a/src/app/(main)/contact/page.tsx b/src/app/(main)/contact/page.tsx
@@ -0,0 +1,9 @@
+import MaxWidthContainer from "@/components/ui/max-width-container";
+
+export default function ContactPage() {
+  return (
+    <MaxWidthContainer>
+      <h1>Contact Page</h1>
+    </MaxWidthContainer>
+  );
+}
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -10,7 +10,7 @@ export default function MainLayout({
   return (
     <>
       <Navbar />
-      {children}
+      <main className="my-8">{children}</main>
     </>
   );
 }
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
@@ -1,3 +1,9 @@
+import MaxWidthContainer from "@/components/ui/max-width-container";
+
 export default function HomePage() {
-  return <main>Home Page</main>;
+  return (
+    <MaxWidthContainer>
+      <h1>Home Page</h1>
+    </MaxWidthContainer>
+  );
 }
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import MaxWidthContainer from "@/components/ui/max-width-container";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html>
+      <body>
+        <main className="min-h-screen w-full">
+          <MaxWidthContainer className="flex flex-col items-center justify-center gap-16 h-full w-full py-10 max-w-screen-lg">
+            <Image
+              src="/images/error-page.svg"
+              alt="403 error"
+              width={450}
+              height={450}
+            />
+
+            <div className="flex flex-col items-center justify-center gap-4 text-center">
+              <p className="text-base font-semibold leading-8 text-primary">
+                500 / 403
+              </p>
+
+              <div className="font-bold tracking-tight text-primary text-2xl">
+                {error.message}
+              </div>
+            </div>
+
+            <div className="flex items-center justify-center gap-4">
+              {/* Back to home Btn */}
+              <Link
+                href="/"
+                className="min-w-48 flex items-center justify-center group border border-stone-200 p-4 hover:border-stone-400 transition-colors"
+              >
+                <span
+                  aria-hidden="true"
+                  className="-mt-[6px] text-2xl group-hover:-translate-x-1 transition-transform"
+                >
+                  &larr;
+                </span>
+                <p>Back to home</p>
+              </Link>
+
+              <button
+                className="min-w-48 flex items-center justify-center group border border-stone-200 p-4 hover:border-stone-400 transition-colors"
+                onClick={() => reset()}
+              >
+                Try again
+              </button>
+            </div>
+          </MaxWidthContainer>
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,32 @@
+import Image from "next/image";
+import Link from "next/link";
+import { MoveLeft } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export default function NotFoundPage() {
+  return (
+    <>
+      <div className="min-h-screen w-full flex flex-col items-center justify-center gap-16">
+        <Image
+          width={500}
+          height={500}
+          src="/images/not-found.svg"
+          alt="Not found"
+        />
+        <span className="text-3xl mx-auto">Page Not Found</span>
+
+        {/* Back to home Btn */}
+        <Link href="/">
+          <Button variant={"outline"} size={"lg"} className="h-14 rounded-sm">
+            <MoveLeft
+              aria-hidden="true"
+              className=" text-2xl group-hover:-translate-x-1 transition-transform"
+            />
+            <p>Back to home</p>
+          </Button>
+        </Link>
+      </div>
+    </>
+  );
+}