-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Wrap MaintenanceNotice component with Suspense
- Loading branch information
1 parent
fc5f583
commit 3f8467a
Showing
2 changed files
with
49 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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:[email protected]" | ||
| className="text-blue-600 hover:text-blue-700" | ||
| > | ||
| [email protected] | ||
| </a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Footer /> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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:[email protected]" | ||
| className="text-blue-600 hover:text-blue-700" | ||
| > | ||
| [email protected] | ||
| </a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Footer /> | ||
| </div> | ||
| <Suspense fallback={null}> | ||
| <MaintenanceNotice /> | ||
| </Suspense> | ||
| ); | ||
| }; | ||
|
|
||
|
|
||