feat: add basic error fallback

Author: alcercu

messages/ar.json

@@ -4,6 +4,11 @@
     "subtitle": "أدخل رقم القضية لعرض تفاصيلها.",
     "button": "بحث"
   },
+  "error": {
+    "title": "حدث خطأ ما!",
+    "subtitle": "القضية التي تبحث عنها غير موجودة بعد.",
+    "button": "حاول مرة أخرى"
+  },
   "case": {
     "title": "القضية",
     "question": {

messages/en.json

@@ -4,6 +4,11 @@
     "subtitle": "Enter the case number to view its details.",
     "button": "Search"
   },
+  "error": {
+    "title": "Something went wrong!",
+    "subtitle": "The case you are looking for doesn't exist yet.",
+    "button": "Try again"
+  },
   "case": {
     "title": "CASE",
     "question": {

messages/es.json

@@ -4,6 +4,11 @@
     "subtitle": "Introduzca el número del caso para ver los detalles.",
     "button": "Buscar"
   },
+  "error": {
+    "title": "Algo salió mal",
+    "subtitle": "El caso que estás buscando no existe aún.",
+    "button": "Vuelva a intentarlo"
+  },
   "case": {
     "title": "CASO",
     "question": {

src/app/[locale]/error.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+
+import clsx from "clsx";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+
+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])
+
+  const t = useTranslations("error");
+  const locale = useLocale();
+
+  return (
+    <div className="mx-auto my-auto flex flex-col justify-center items-center">
+      <h2 className="text-secondary-text text-xl font-bold text-center mb-4">
+        {t("title")}
+      </h2>
+      <h3 className="text-secondary-text text-md text-center mb-4">
+        {t("subtitle")}
+      </h3>
+      <Link
+        href={`/${locale}`}
+        className={clsx(
+          "rounded bg-primary-blue hover:bg-secondary-blue transition w-max",
+          "px-6 py-2 text-white-background font-semibold",
+        )}
+      >
+        {t("button")}
+      </Link>
+    </div>
+  );
+}