From f232c2549493f7a62bc4876f1c8864886c356b63 Mon Sep 17 00:00:00 2001
From: sarthak-kumar-shailendra <sarthak.shailendra@gmail.com>
Date: Fri, 6 Oct 2023 23:18:02 +0530
Subject: [PATCH] added custom 404 page

---
 .../(chapter)/[[...locale]]/page.tsx          | 13 ++++--
 .../[verseNumber]/[[...locale]]/page.tsx      | 13 ++++--
 .../verse-of-the-day/[[...locale]]/page.tsx   |  8 +++-
 src/components/NotFound/index.tsx             | 43 ++++++++++++++++++-
 src/shared/translate/locales/hi.json          |  6 ++-
 5 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/page.tsx b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/page.tsx
index b7031ce..e545133 100644
--- a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/page.tsx
+++ b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/page.tsx
@@ -89,12 +89,19 @@ export default async function Chapter({ params }: Props) {
     languageSettings.translationAuthor.id,
   );
 
+  const translations = await getTranslations(locale);
+
   if (!chapterData) {
-    return <NotFound hint={`Chapter ${chapterNumber} not found`} />;
+    return (
+      <NotFound
+        translations={translations}
+        locale={locale}
+        hint={chapterNumber}
+        isChapter={true}
+      />
+    );
   }
 
-  const translations = await getTranslations(locale);
-
   return (
     <>
       <script
diff --git a/src/app/chapter/[chapterNumber]/verse/[verseNumber]/[[...locale]]/page.tsx b/src/app/chapter/[chapterNumber]/verse/[verseNumber]/[[...locale]]/page.tsx
index a586437..f5ba49b 100644
--- a/src/app/chapter/[chapterNumber]/verse/[verseNumber]/[[...locale]]/page.tsx
+++ b/src/app/chapter/[chapterNumber]/verse/[verseNumber]/[[...locale]]/page.tsx
@@ -80,12 +80,19 @@ const Verse = async ({ params }: Props) => {
     languageSettings.translationAuthor.id,
   );
 
+  const translations = await getTranslations(locale);
+
   if (!verseData) {
-    return <NotFound hint={`Verse ${verseNumber} not found`} />;
+    return (
+      <NotFound
+        translations={translations}
+        locale={locale}
+        hint={verseNumber}
+        isVerse={true}
+      />
+    );
   }
 
-  const translations = await getTranslations(locale);
-
   return (
     <article>
       <script
diff --git a/src/app/verse-of-the-day/[[...locale]]/page.tsx b/src/app/verse-of-the-day/[[...locale]]/page.tsx
index 67b0d4a..ee64115 100644
--- a/src/app/verse-of-the-day/[[...locale]]/page.tsx
+++ b/src/app/verse-of-the-day/[[...locale]]/page.tsx
@@ -54,7 +54,13 @@ const Page = async ({ params }: ParamsWithLocale) => {
   const dailyVerse = await getDailyVerse(locale);
 
   if (!dailyVerse) {
-    return <NotFound hint="Daily verse not found" />;
+    return (
+      <NotFound
+        translations={await getTranslations(locale)}
+        locale={locale}
+        hint="Daily verse not found"
+      />
+    );
   }
 
   return (
diff --git a/src/components/NotFound/index.tsx b/src/components/NotFound/index.tsx
index 0548690..c8dd04f 100644
--- a/src/components/NotFound/index.tsx
+++ b/src/components/NotFound/index.tsx
@@ -1,11 +1,50 @@
+import Image from "next/image";
+
+import LinkWithLocale from "components/LinkWithLocale";
+import { getTranslate } from "shared/translate";
+
 type Props = {
   hint?: string;
-};
+  isChapter?: boolean;
+  isVerse?: boolean;
+} & LocaleAndTranslations;
 
 function NotFound(props: Props) {
   const { hint } = props;
+  const { translations, locale, isChapter, isVerse } = props;
+
+  const translate = getTranslate(translations, locale);
 
-  return <h1 className="p-10 text-center">{hint || "Not found"}</h1>;
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <Image
+        src={"/quotes-bg.png"}
+        alt="BG Not Found Banner Image"
+        layout="fill"
+        objectFit="cover"
+        objectPosition="center"
+      />
+      <div className="p-2 text-center drop-shadow-card">
+        <h1 className="mb-4 text-4xl font-bold text-my-orange ">
+          {isChapter
+            ? `${translate("Chapter")} ${hint} ${translate("Not found")}`
+            : isVerse
+            ? `${translate("Verse")} ${hint} ${translate("Not found")}`
+            : `${translate(hint || "Not found")}`}
+        </h1>
+        <p className="mb-8 text-xl text-white">
+          {" "}
+          {translate("Sorry, the page you're looking for doesn't exist")}
+        </p>
+        <LinkWithLocale
+          href={"/"}
+          className="items-center rounded-md border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-my-orange focus:ring-offset-2"
+        >
+          {translate("Go Back to Home")}
+        </LinkWithLocale>
+      </div>
+    </div>
+  );
 }
 
 export default NotFound;
diff --git a/src/shared/translate/locales/hi.json b/src/shared/translate/locales/hi.json
index 7ad4ed0..ea3c564 100644
--- a/src/shared/translate/locales/hi.json
+++ b/src/shared/translate/locales/hi.json
@@ -83,5 +83,9 @@
   "Sorry, we couldn't find the page you're looking for": "क्षमा करें, हम वह पेज नहीं ढूंढ सके जिसे आप ढूंढ रहे थे",
   "App": "मोबाइल ऐप",
   "Privacy": "प्राइवेसी",
-  "Acknowledgements": "स्वीकृतियाँ"
+  "Acknowledgements": "स्वीकृतियाँ",
+  "Go Back to Home": "होम पेज पर वापस जाएँ",
+  "Sorry, the page you're looking for doesn't exist": "क्षमा करें, आप जिस पेज की तलाश कर रहे हैं वह मौजूद नहीं है",
+  "Daily verse not found": "दैनिक श्लोक नहीं मिला",
+  "Not found": "नहीं मिला"
 }