Merge pull request #43 from imperial/feat-error-page

Feat error pages

app/companies/not-found.tsx

@@ -0,0 +1,13 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return (
+    <NotFoundPage
+      message="We could not find the company you were looking for."
+      btnName="Go to all companies page"
+      btnUrl="/companies"
+    />
+  )
+}

app/error.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+// Error boundaries must be Client Components
+import ErrorPage from "@/components/ErrorPage"
+import { AnimatedButton } from "@/components/buttons/AnimatedButton"
+
+import { Button } from "@radix-ui/themes"
+import React, { useEffect } from "react"
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error)
+  }, [error])
+
+  return (
+    <ErrorPage title="Oops!" message="Something went wrong!">
+      <AnimatedButton
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </AnimatedButton>
+    </ErrorPage>
+  )
+}

app/events/not-found.tsx

@@ -0,0 +1,13 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return (
+    <NotFoundPage
+      message="We could not find the event you were looking for."
+      btnName="Go to all events page"
+      btnUrl="/events"
+    />
+  )
+}

app/not-found.tsx

@@ -0,0 +1,7 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return <NotFoundPage message="Page not found." btnName="Go back home" btnUrl="/" />
+}

app/opportunities/not-found.tsx

@@ -0,0 +1,13 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return (
+    <NotFoundPage
+      message="We could not find the opportunity you were looking for."
+      btnName="Go to all opportunities page"
+      btnUrl="/opportunitites"
+    />
+  )
+}

app/students/not-found.tsx

@@ -0,0 +1,13 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return (
+    <NotFoundPage
+      message="We could not find the student you were looking for."
+      btnName="Go to all students page"
+      btnUrl="/students"
+    />
+  )
+}

components/ErrorPage.tsx

@@ -0,0 +1,28 @@
+import styles from "./error.module.scss"
+
+import { Flex, Heading } from "@radix-ui/themes"
+import React from "react"
+
+export default function ErrorPage({
+  children,
+  title,
+  message,
+}: {
+  children: React.ReactNode
+  title: string
+  message: string
+}) {
+  return (
+    <div className={styles.container}>
+      <Flex justify="center" align="center" direction="column" gap="3">
+        <Heading as="h1" className={styles.header}>
+          {title}
+        </Heading>
+        <Heading as="h2" className={styles.message}>
+          {message}
+        </Heading>
+        {children}
+      </Flex>
+    </div>
+  )
+}

components/NotFoundPage.tsx

@@ -0,0 +1,33 @@
+import { AnimatedButton } from "@/components/buttons/AnimatedButton"
+
+import styles from "./error.module.scss"
+
+import { Flex, Heading } from "@radix-ui/themes"
+import Link from "next/link"
+import React from "react"
+
+export default function NotFoundPage({
+  message,
+  btnName,
+  btnUrl,
+}: {
+  message: string
+  btnName: string
+  btnUrl: string
+}) {
+  return (
+    <div className={styles.container}>
+      <Flex justify="center" align="center" direction="column" gap="3">
+        <Heading as="h1" className={styles.header}>
+          404
+        </Heading>
+        <Heading as="h2" className={styles.message}>
+          {message}
+        </Heading>
+        <AnimatedButton asChild>
+          <Link href={btnUrl}>{btnName}</Link>
+        </AnimatedButton>
+      </Flex>
+    </div>
+  )
+}

components/buttons/AnimatedButton.tsx

@@ -0,0 +1,14 @@
+import styles from "./animated-button.module.scss"
+
+import { Button } from "@radix-ui/themes"
+import React from "react"
+
+type AnimatedButtonProps = React.ComponentProps<typeof Button>
+
+export const AnimatedButton: React.FC<AnimatedButtonProps> = props => {
+  return (
+    <Button className={styles.animatedButton} {...props}>
+      {props.children}
+    </Button>
+  )
+}

components/buttons/animated-button.module.scss

@@ -0,0 +1,43 @@
+.animatedButton {
+  background-color: var(--blue-9);
+  -webkit-transition:
+    -webkit-transform 0.3s ease-out,
+    -webkit-box-shadow 0.3s ease-out;
+  -moz-transition:
+    -moz-transform 0.3s ease-out,
+    -moz-box-shadow 0.3s ease-out;
+  -o-transition:
+    -o-transform 0.3s ease-out,
+    -o-box-shadow 0.3s ease-out;
+  -ms-transition:
+    -ms-transform 0.3s ease-out,
+    -ms-box-shadow 0.3s ease-out;
+  transition:
+    transform 0.3s ease-out,
+    box-shadow 0.3s ease-out;
+  &:hover {
+    background-color: var(--blue-9);
+    border: solid 2px var(--blue-10);
+    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
+    -webkit-transform: scale(1.05);
+    -moz-transform: scale(1.05);
+    -o-transform: scale(1.05);
+    transform: scale(1.05);
+
+    -webkit-transition:
+      -webkit-transform 0.3s ease-out,
+      -webkit-box-shadow 0.3s ease-out;
+    -moz-transition:
+      -moz-transform 0.3s ease-out,
+      -moz-box-shadow 0.3s ease-out;
+    -o-transition:
+      -o-transform 0.3s ease-out,
+      -o-box-shadow 0.3s ease-out;
+    -ms-transition:
+      -ms-transform 0.3s ease-out,
+      -ms-box-shadow 0.3s ease-out;
+    transition:
+      transform 0.3s ease-out,
+      box-shadow 0.3s ease-out;
+  }
+}

components/error.module.scss

@@ -0,0 +1,10 @@
+.container {
+  .header {
+    font-size: 3rem;
+    color: var(--blue-8);
+  }
+  .message {
+    font-size: 1rem;
+    color: var(--gray-9);
+  }
+}