home page modals

SnowSE · Sep 14, 2023 · 0651d9a · 0651d9a
1 parent c5eba05
commit 0651d9a
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 2 deletions.
diff --git a/src/v2/client/public/index.html b/src/v2/client/public/index.html
@@ -28,6 +28,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="custom-modal-portal"></div>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/src/v2/client/src/pages/home/BenefitsModal.tsx b/src/v2/client/src/pages/home/BenefitsModal.tsx
@@ -0,0 +1,32 @@
+import { useModal, CustomModal, ModalButton } from "../../components/CustomModal"
+
+export const BenefitsModal = () => {
+  const eventDetailModalControl = useModal("Benefits", "lg")
+
+  const ModalButton: ModalButton = ({ showModal }) => (
+    <button className="btn text-info"
+      onClick={showModal}>BENEFITS OF CHARITY TEAMS</button>
+  )
+  return (
+    <CustomModal ModalButton={ModalButton} controls={eventDetailModalControl}>
+      <>
+        <div className="modal-header">
+          <div className="modal-title fw-bold fs-4">Benefits of Joining a Charity Event Team</div>
+        </div>
+        <div className="modal-body">
+          <ul>
+            <li>Joining a team for a charity event is a powerful way to maximize your impact and make a positive difference in the lives of others.</li>
+            <li>When you're part of a team, you benefit from the camaraderie and collective motivation, which encourages you to contribute more generously than you might on your own.</li>
+            <li>The spirit of friendly competition among teams drives each member to push their limits, resulting in a greater overall contribution to the cause.</li>
+            <li>Being part of a team fosters a sense of belonging, creating a network of passionate individuals united by a common goal.</li>
+            <li>By working together and leveraging each other's strengths, you not only raise more funds for the charity, but you also forge lasting connections that strengthen your community and promote a culture of giving.</li>
+          </ul>
+          <div className="row mx-5 my-3">
+            <button className="btn text-info"
+              onClick={() => eventDetailModalControl.hide()}>CLOSE</button>
+          </div>
+        </div>
+      </>
+    </CustomModal>
+  )
+}
diff --git a/src/v2/client/src/pages/home/Home.tsx b/src/v2/client/src/pages/home/Home.tsx
@@ -1,3 +1,5 @@
+import { BenefitsModal } from "./BenefitsModal";
+import { UpcomingEventsModal } from "./UpcomingEventsModal";
 
 export const Home = () => {
   const width = 1;
@@ -26,7 +28,7 @@ export const Home = () => {
             <button className="btn btn-secondary text-white">SHARE NOW</button>
           </div>
           <div className="col-auto">
-            <button className="btn btn-secondary text-white">EVENT DETAILS</button>
+            <UpcomingEventsModal />
           </div>
           <div className="col-auto">
             <button className="btn btn-secondary text-white">DONATE</button>
@@ -37,7 +39,7 @@ export const Home = () => {
         <div className="fw-bold text-black fs-4">Charity Teams</div>
         <div className="text-start">Joining a charity team is a fulfilling way to make a positive impact while connecting with like-minded individuals who share your passion for giving back.</div>
         <div className="my-3">
-          <button className="btn text-info">BENEFITS OF CHARITY TEAMS</button>
+          <BenefitsModal />
         </div>
         <div className="row pb-3">
           <div className="col text-end">

diff --git a/src/v2/client/src/pages/home/UpcomingEventsModal.tsx b/src/v2/client/src/pages/home/UpcomingEventsModal.tsx
@@ -0,0 +1,21 @@
+import { CustomModal, useModal, ModalButton } from "../../components/CustomModal"
+
+export const UpcomingEventsModal = () => {
+  const eventDetailModalControl = useModal("Event Details", "lg")
+
+  const ModalButton: ModalButton = ({ showModal }) => (
+    <button className="btn btn-secondary text-white"
+      onClick={showModal}>EVENT DETAILS</button>
+  )
+  return (
+    <CustomModal ModalButton={ModalButton} controls={eventDetailModalControl}>
+      <div className="modal-body text-center">
+        <div className="fw-bold fs-3">Event: There are currently no upcoming events</div>
+        <div className="row mx-5 my-3">
+          <button className="btn btn-secondary text-white"
+            onClick={() => eventDetailModalControl.hide()}>OK</button>
+        </div>
+      </div>
+    </CustomModal>
+  )
+}