add: offline fallback

next.config.js

@@ -1,5 +1,8 @@
 const withPWA = require("@ducanh2912/next-pwa").default({
   dest: "public",
+  fallbacks: {
+    document: "/~offline",
+  }
 });
 
 const config = {

src/app/layout.tsx

@@ -16,7 +16,7 @@ const lato = Lato({
 export const metadata: Metadata = {
   metadataBase: canonicalUrl,
   manifest: '/manifest.json',
-  themeColor: '#ffffff',
+  themeColor: '#f1f5f9',
 };
 
 const AudioPlayer = dynamic(

src/app/quran/surah/[chapterId]/layout.tsx

@@ -1,5 +1,6 @@
 import TafsirModal from '@components/Tafsir/Tafsir';
 import TopBar from '@components/TopBar/TopBar';
+import Script from 'next/script';
 import React from 'react';
 
 const SurahLayout = ({ children }: { children: React.ReactNode }) => {
@@ -8,6 +9,13 @@ const SurahLayout = ({ children }: { children: React.ReactNode }) => {
       <TopBar />
       {children}
       <TafsirModal />
+      <noscript>
+        <div className="text-center pb-4">
+          <span className="font-semibold text-lg text-emerald-500">
+            Nyalakan JavaScript untuk men-load semua ayah
+          </span>
+        </div>
+      </noscript>
     </>
   );
 };

src/app/~offline/page.tsx

@@ -0,0 +1,22 @@
+import { Metadata } from 'next';
+import React from 'react';
+
+type Props = {};
+
+export const metadata: Metadata = {
+  title: '~ Anda sedang offline',
+  robots: 'noindex,nofollow',
+};
+
+const OfflineFallback = (props: Props) => {
+  return (
+    <main className="min-h-screen grid place-items-center">
+      <div className="bg-emerald-500 px-4 py-6 w-4/5 rounded-lg max-w-screen-md text-center text-emerald-50 font-semibold shadow-xl shadow-emerald-600/30">
+        <strong className="text-2xl block mb-2">Anda sedang offline</strong>
+        <span>Silakan cek koneksi internet Anda.</span>
+      </div>
+    </main>
+  );
+};
+
+export default OfflineFallback;