Merge branch 'main' into feat/readme

velocitylabs-org · Aug 13, 2024 · f02f2c4 · f02f2c4
2 parents 37c8604 + 2d82bfe
commit f02f2c4
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 9 deletions.
diff --git a/app/src/app/error.tsx b/app/src/app/error.tsx
@@ -0,0 +1,45 @@
+'use client'
+import { useEffect } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { captureException } from '@sentry/nextjs'
+
+const Error = ({ error }: { error: Error & { digest?: string } }) => {
+  useEffect(() => {
+    captureException(error)
+  }, [error])
+
+  return (
+    <div className="w-full">
+      {/* background */}
+      <Image
+        src="/turtle-background.webp"
+        alt="Turtle Background"
+        className="relative z-0"
+        fill
+        style={{ objectFit: 'cover' }}
+        sizes="100vw"
+        priority
+      />
+      {/* background overlay*/}
+      <div className="turtle-dark-overlay absolute h-full w-full" />
+
+      {/* Content */}
+      <section className="absolute inset-0 z-20 flex flex-col items-center justify-center text-center">
+        <div className="flex flex-col items-center justify-center gap-8 text-white">
+          <h1 className="text-xl font-bold leading-5">500</h1>
+          <h2 className="text-4xl font-medium leading-[56px] tracking-tighter sm:text-[56px]">
+            Oops, something went wrong.
+          </h2>
+          <div className="flex flex-col justify-center gap-6 text-xl leading-5">
+            <Link href="/" className="underline">
+              Try again
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default Error
diff --git a/app/src/app/global-error.tsx b/app/src/app/global-error.tsx
@@ -1,22 +1,45 @@
 'use client'
 import { captureException } from '@sentry/nextjs'
 import { useEffect } from 'react'
+import Image from 'next/image'
+import Navbar from '@/components/NavBar'
 
-interface GlobalErrorProps {
-  error: Error & { digest?: string }
-  reset: () => void
-}
-
-const GlobalError: React.FC<GlobalErrorProps> = ({ error, reset }) => {
+const GlobalError = ({ error }: { error: Error & { digest?: string } }) => {
   useEffect(() => {
     captureException(error)
   }, [error])
 
   return (
     <html>
-      <body>
-        <h2>Something went wrong!</h2>
-        <button onClick={() => reset()}>Try again</button>
+      <body className="w-full">
+        {/* background */}
+        <Image
+          src="/turtle-background.webp"
+          alt="Turtle Background"
+          className="relative z-0"
+          fill
+          style={{ objectFit: 'cover' }}
+          sizes="100vw"
+          priority
+        />
+        {/* background overlay*/}
+        <div className="turtle-dark-overlay absolute h-full w-full"></div>
+
+        {/* Header */}
+        <div className="absolute inset-x-0 top-0">
+          <Navbar />
+        </div>
+
+        {/* Content */}
+        <section className="absolute inset-0 z-20 flex flex-col items-center justify-center text-center">
+          <div className="flex flex-col items-center justify-center gap-8 text-white">
+            <h1 className="text-xl font-bold leading-5">500</h1>
+            <h2 className="text-4xl font-medium leading-[56px] tracking-tighter sm:text-[56px]">
+              Turtle is temporary unavailable.
+            </h2>
+            <div className="text-xl leading-5 underline">Try again later</div>
+          </div>
+        </section>
       </body>
     </html>
   )

diff --git a/app/src/app/not-found.tsx b/app/src/app/not-found.tsx
@@ -0,0 +1,39 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+const NotFound = () => {
+  return (
+    <div className="w-full">
+      {/* background */}
+      <Image
+        src="/turtle-background.webp"
+        alt="Turtle Background for not found 404 page"
+        className="relative z-0"
+        fill
+        style={{ objectFit: 'cover' }}
+        sizes="100vw"
+        priority
+      />
+      {/* background overlay*/}
+      <div className="turtle-dark-overlay absolute h-full w-full" />
+
+      {/* Content */}
+      <section className="absolute inset-0 z-20 flex flex-col items-center justify-center text-center">
+        <div className="flex flex-col items-center justify-center gap-8 text-white">
+          <h1 className="text-xl font-bold leading-5">404</h1>
+          <h2 className="text-4xl font-medium leading-[56px] tracking-tighter sm:text-[56px]">
+            Oops, this page is missing.
+          </h2>
+          <div className="flex flex-col justify-center gap-6 text-xl leading-5">
+            <p>Maybe you clicked on an old link!</p>
+            <Link href="/" className="underline">
+              Back home
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default NotFound