From a177f423e289fd4274b77bbbd7c0c26e25715850 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Sun, 8 Sep 2024 06:33:47 +0200
Subject: [PATCH] feat: add NoScript component

---
 app/(root)/layout.tsx          | 2 ++
 app/not-found.tsx              | 6 ++++--
 components/shared/NoScript.tsx | 9 +++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 components/shared/NoScript.tsx

diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index 11f5555..5eb23bf 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -1,6 +1,7 @@
 import Footer from "@/components/shared/Footer";
 import Navbar from "@/components/shared/Navbar";
 import Banner from "@/components/widgets/Banner";
+import NoScript from "@/components/shared/NoScript";
 import { Home } from "lucide-react";
 import { Metadata } from "next";
 
@@ -52,6 +53,7 @@ export default function PageLayout({
         buttonText="Read more"
       />
       <Navbar />
+      <NoScript />
       <div className="flex-grow flex-1 overflow-x-hidden">{children}</div>
       <Footer />
     </div>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 8bab2e0..e8d1b74 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Footer from "@/components/shared/Footer";
 import Navbar from "@/components/shared/Navbar";
 import Link from "next/link";
+import NoScript from "@/components/shared/NoScript";
 
 export const metadata: Metadata = {
   title: "404 Not Found - SVR.JS",
@@ -16,8 +17,9 @@ export const metadata: Metadata = {
 const NotFound = () => {
   return (
     <>
-      <main className="flex flex-col min-h-screen">
+      <div className="flex flex-col min-h-screen">
         <Navbar />
+        <NoScript />
         <section
           id="404error"
           className="flex-center flex-col wrapper container flex-1 flex-grow"
@@ -33,7 +35,7 @@ const NotFound = () => {
           </p>
         </section>
         <Footer />
-      </main>
+      </div>
     </>
   );
 };
diff --git a/components/shared/NoScript.tsx b/components/shared/NoScript.tsx
new file mode 100644
index 0000000..433a634
--- /dev/null
+++ b/components/shared/NoScript.tsx
@@ -0,0 +1,9 @@
+const NoScript = () => {
+  return (
+    <noscript className="bg-orange-500 text-white p-1 font-bold text-lg">
+      Turn on JavaScript for a better experience.
+    </noscript>
+  );
+};
+
+export default NoScript;