From 3f8467a13af67ff2ec6f359e63e85371906e6352 Mon Sep 17 00:00:00 2001
From: Ru Chern Chong <ruchern.chong@sgcarstrends.com>
Date: Sat, 30 Nov 2024 22:22:19 +0800
Subject: [PATCH] Wrap MaintenanceNotice component with Suspense

---
 .../components/MaintenanceNotice.tsx          | 44 ++++++++++++++++++
 app/maintenance/page.tsx                      | 45 +++----------------
 2 files changed, 49 insertions(+), 40 deletions(-)
 create mode 100644 app/maintenance/components/MaintenanceNotice.tsx

diff --git a/app/maintenance/components/MaintenanceNotice.tsx b/app/maintenance/components/MaintenanceNotice.tsx
new file mode 100644
index 0000000..16cf4ab
--- /dev/null
+++ b/app/maintenance/components/MaintenanceNotice.tsx
@@ -0,0 +1,44 @@
+import { AlertTriangle, Clock } from "lucide-react";
+import { Footer } from "@/app/maintenance/components/Footer";
+import { Header } from "@/app/maintenance/components/Header";
+
+export const MaintenanceNotice = () => {
+  return (
+    <div className="flex min-h-screen flex-col bg-gray-50">
+      <Header />
+      <div className="flex flex-1 items-center justify-center p-4">
+        <div className="w-full max-w-2xl rounded-lg border border-gray-100 bg-white p-8 text-center shadow-sm">
+          <div className="mb-6 flex justify-center">
+            <AlertTriangle className="h-16 w-16 text-blue-600" />
+          </div>
+          <h1 className="mb-4 text-3xl font-semibold text-gray-800">
+            System Maintenance
+          </h1>
+          <div className="mb-8 space-y-4">
+            <p className="text-gray-600">
+              We are currently performing scheduled maintenance to improve your
+              experience. Our services will be back online shortly.
+            </p>
+            <div className="flex items-center justify-center space-x-2 text-gray-500">
+              <Clock className="h-5 w-5" />
+              <span>Estimated downtime: 2 hours</span>
+            </div>
+          </div>
+          <div className="rounded-lg bg-gray-50 p-4">
+            <p className="text-sm text-gray-600">
+              For urgent inquiries, please contact our support team at:
+              <br />
+              <a
+                href="mailto:support@sgcarstrends.com"
+                className="text-blue-600 hover:text-blue-700"
+              >
+                support@sgcarstrends.com
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
diff --git a/app/maintenance/page.tsx b/app/maintenance/page.tsx
index 7ec23fc..ec2a8a0 100644
--- a/app/maintenance/page.tsx
+++ b/app/maintenance/page.tsx
@@ -1,10 +1,8 @@
 "use client";
 
-import { useEffect } from "react";
+import { Suspense, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { AlertTriangle, Clock } from "lucide-react";
-import { Footer } from "@/app/maintenance/components/Footer";
-import { Header } from "@/app/maintenance/components/Header";
+import { MaintenanceNotice } from "@/app/maintenance/components/MaintenanceNotice";
 
 const MaintenancePage = () => {
   const router = useRouter();
@@ -37,42 +35,9 @@ const MaintenancePage = () => {
   }, [router, searchParams]);
 
   return (
-    <div className="flex min-h-screen flex-col bg-gray-50">
-      <Header />
-      <div className="flex flex-1 items-center justify-center p-4">
-        <div className="w-full max-w-2xl rounded-lg border border-gray-100 bg-white p-8 text-center shadow-sm">
-          <div className="mb-6 flex justify-center">
-            <AlertTriangle className="h-16 w-16 text-blue-600" />
-          </div>
-          <h1 className="mb-4 text-3xl font-semibold text-gray-800">
-            System Maintenance
-          </h1>
-          <div className="mb-8 space-y-4">
-            <p className="text-gray-600">
-              We are currently performing scheduled maintenance to improve your
-              experience. Our services will be back online shortly.
-            </p>
-            <div className="flex items-center justify-center space-x-2 text-gray-500">
-              <Clock className="h-5 w-5" />
-              <span>Estimated downtime: 2 hours</span>
-            </div>
-          </div>
-          <div className="rounded-lg bg-gray-50 p-4">
-            <p className="text-sm text-gray-600">
-              For urgent inquiries, please contact our support team at:
-              <br />
-              <a
-                href="mailto:support@sgcarstrends.com"
-                className="text-blue-600 hover:text-blue-700"
-              >
-                support@sgcarstrends.com
-              </a>
-            </p>
-          </div>
-        </div>
-      </div>
-      <Footer />
-    </div>
+    <Suspense fallback={null}>
+      <MaintenanceNotice />
+    </Suspense>
   );
 };