generated from CS3219-AY2324S1/course-assessment-template
-
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.
Merge pull request #99 from CS3219-AY2324S1/add-confirm-modal-to-repl…
…ace-windows.confirm Add confirm modal to replace windows.confirm
- Loading branch information
Showing
4 changed files
with
128 additions
and
41 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,77 @@ | ||
type ConfirmModalProps = { | ||
isOpen: boolean; | ||
title?: string; | ||
message: string; | ||
onConfirm: () => void; | ||
onCancel: () => void; | ||
cancelButtonText?: string; | ||
confirmButtonText?: string; | ||
type?: "warning" | "neutral"; | ||
}; | ||
const ConfirmModal = ({ | ||
isOpen, | ||
title, | ||
message, | ||
onConfirm, | ||
onCancel, | ||
cancelButtonText = "Cancel", | ||
confirmButtonText = "Confirm", | ||
type = "neutral", | ||
}: ConfirmModalProps) => { | ||
if (!isOpen) return null; | ||
|
||
return ( | ||
<div className="fixed z-10 inset-0 overflow-y-auto"> | ||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | ||
<div className="fixed inset-0 transition-opacity" aria-hidden="true"> | ||
<div className="absolute inset-0 bg-gray-500 opacity-70"></div> | ||
</div> | ||
<span | ||
className="hidden sm:inline-block sm:align-middle sm:h-screen" | ||
aria-hidden="true" | ||
> | ||
​ | ||
</span> | ||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | ||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | ||
<div className="sm:flex sm:items-start"> | ||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | ||
<h3 | ||
className="text-lg leading-6 font-medium text-gray-900" | ||
id="modal-title" | ||
> | ||
{title} | ||
</h3> | ||
<div className="mt-2"> | ||
<p className="text-sm text-gray-500">{message}</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | ||
<button | ||
type="button" | ||
className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white ${ | ||
type == "warning" | ||
? "bg-red-600 hover:bg-red-700 focus:ring-red-500" | ||
: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500" | ||
}focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`} | ||
onClick={onConfirm} | ||
> | ||
{confirmButtonText} | ||
</button> | ||
<button | ||
type="button" | ||
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" | ||
onClick={onCancel} | ||
> | ||
{cancelButtonText} | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default ConfirmModal; |
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