-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add Navbar and Home Page * Add Temporary About Us Page * Replace double quotes * Remove unused button * Fix Modal Overlay and About Us Page * Fix Some Bug * Remove Unused Modal * Fix bug * Fix layout and reorganize code --------- Co-authored-by: Rafael Kristoforus Yanto <[email protected]> Co-authored-by: izruff <[email protected]>
- Loading branch information
3 people
authored
Oct 12, 2024
1 parent
7063889
commit 4770e97
Showing
3 changed files
with
130 additions
and
60 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
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
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,39 +1,47 @@ | ||
| "use client"; | ||
| import { Suspense } from "react"; | ||
| import { useSearchParams } from "next/navigation"; | ||
| import Link from "next/link"; | ||
| import { useEffect, MouseEvent, ReactNode } from 'react'; | ||
|
|
||
| function ModalOverlayContent() { | ||
| const searchParams = useSearchParams(); | ||
| const modal = searchParams.get("modal"); | ||
| interface ModalOverlayProps { | ||
| onClose: () => void; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| function ModalOverlay({ onClose, children }: ModalOverlayProps) { | ||
| // Handle outside click to close modal | ||
| const handleOutsideClick = (e: MouseEvent<HTMLDivElement>) => { | ||
| if ((e.target as HTMLElement).id === 'modal-overlay') { | ||
| onClose(); | ||
| } | ||
| }; | ||
|
|
||
| // Close modal on 'Escape' key press | ||
| useEffect(() => { | ||
| const handleEscape = (e: KeyboardEvent) => { | ||
| if (e.key === 'Escape') { | ||
| onClose(); | ||
| } | ||
| }; | ||
| window.addEventListener('keydown', handleEscape); | ||
| return () => window.removeEventListener('keydown', handleEscape); | ||
| }, [onClose]); | ||
|
|
||
| return ( | ||
| <> | ||
| {(modal === "true" || modal === null) && | ||
| <dialog className="fixed top-0 left-0 w-full h-full bg-transparent flex justify-center items-center z-50"> | ||
| <div className="relative w-full h-full flex justify-center items-center bg-black bg-opacity-20"> | ||
| <div className="bg-white p-5 rounded-lg shadow-lg max-w-lg w-full text-center animate-slide-up"> | ||
| <div className="text-lg text-[#bd9527] leading-6 font-myriad"> | ||
| <p>Coming Soon: NUANSA 2025</p> | ||
| <br /> | ||
| <Link href="?modal=false"> | ||
| <button type="button" className="bg-[#fecd94] text-white border-none py-2 px-4 rounded cursor-pointer text-base hover:bg-[#0056b3]"> | ||
| Continue | ||
| </button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </dialog> | ||
| } | ||
| </> | ||
| ); | ||
| return ( | ||
| <div | ||
| id="modal-overlay" | ||
| className="fixed max-h-screen py-10 inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50" | ||
| onClick={handleOutsideClick} | ||
| > | ||
| <div className="bg-white rounded-lg shadow-lg p-6 pt-10 relative max-w-md max-h-full sm:max-w-lg md:max-w-xl lg:max-w-2xl xl:max-w-3xl overflow-auto"> | ||
| <button | ||
| onClick={onClose} | ||
| className="absolute top-4 right-4 text-gray-500 hover:text-gray-800" | ||
| > | ||
| × | ||
| </button> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function ModalOverlay() { | ||
| return ( | ||
| <Suspense fallback={null}> | ||
| <ModalOverlayContent /> | ||
| </Suspense> | ||
| ); | ||
| } | ||
| export default ModalOverlay; |