add mobile view skeletons (#279)

app/page.tsx

@@ -1,19 +1,34 @@
 import React from "react";
 import styles from "./page.module.scss";
-import Olympian from "@/components/Home/Olympian/Olympian";
-import Footer from "@/components/Home/Footer/Footer";
-import FAQJoinUs from "@/components/Home/FAQJoinUs/FAQJoinUs";
-import Sponsors from "@/components/Home/Sponsors/Sponsors";
-import FAQSection from "@/components/Home/FAQ/FAQ";
+// import Olympian from "@/components/Home/Olympian/Olympian";
+// import Footer from "@/components/Home/Footer/Footer";
+// import FAQJoinUs from "@/components/Home/FAQJoinUs/FAQJoinUs";
+// import Sponsors from "@/components/Home/Sponsors/Sponsors";
+// import FAQSection from "@/components/Home/FAQ/FAQ";
+import Accepted from "@/components/Profile/RSVP/ModalViews/Accepted";
+import Rejected from "@/components/Profile/RSVP/ModalViews/Rejected";
+import ConfirmReject from "@/components/Profile/RSVP/ModalViews/ConfirmReject";
 
 const Home: React.FC = () => {
     return (
         <main className={styles.main}>
-            <Olympian />
+            <ConfirmReject
+                handleAPIDecline={() => {}}
+                handleGoBack={() => {}}
+            />
+            <Accepted
+                reimburse={120.23}
+                handleConfirm={() => {}}
+                handleDecline={() => {}}
+            >
+                <b>Congrats, stuff is happening</b>
+            </Accepted>
+            <Rejected handleCancel={() => {}} />
+            {/* <Olympian />
             <FAQJoinUs />
             <FAQSection />
             <Sponsors />
-            <Footer />
+            <Footer /> */}
         </main>
     );
 };

components/Profile/RSVP/ModalViews/Accepted.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import styles from "./styles.module.scss";
+
+type Accepted = {
+    children: React.ReactNode;
+    reimburse: number;
+    handleConfirm: () => void;
+    handleDecline: () => void;
+};
+
+export default function Accepted({ children, reimburse }: Accepted) {
+    return (
+        <div className={styles.container}>
+            <div className={styles.textBlock}>
+                {children}
+                <p>
+                    If you would like to attend HackIllinois 2024, click Confirm
+                    to finish the RSVP process. If you won&apos;t be attending
+                    please click Decline. This cannot be reversed.
+                </p>
+                {reimburse > 0 && (
+                    <p>
+                        Additionally, you have been approved for a travel
+                        reimbursement of ${reimburse.toFixed(2)}. Receiving this
+                        reimbursement is contingent on you coming to
+                        HackIllinois in-person and submitting a project.
+                    </p>
+                )}
+            </div>
+            <div className={styles.buttonGroup}>
+                {/* <ConfirmButton onClick={handleConfirm} />
+                <DeclineButton onClick={handleDecline} /> */}
+            </div>
+            {/* <div className={styles.mobileButtonGroup}>
+                <button onClick={handleConfirm}>
+                    <Image
+                        alt="confirm button"
+                        src={MobileConfirmButton}
+                        width={309}
+                        height={54}
+                    />
+                </button>
+                <button onClick={handleDecline}>
+                    <Image
+                        alt="decline button"
+                        src={MobileDeclineButton}
+                        width={309}
+                        height={54}
+                    />
+                </button>
+            </div> */}
+        </div>
+    );
+}

components/Profile/RSVP/ModalViews/ConfirmReject.tsx

@@ -0,0 +1,32 @@
+import styles from "./styles.module.scss";
+
+type ConfirmRejectProps = {
+    handleGoBack: () => void;
+    handleAPIDecline: () => void;
+};
+
+export default function ConfirmReject({ handleGoBack }: ConfirmRejectProps) {
+    return (
+        <div className={styles.container}>
+            <b>Are you sure you want to decline?</b>
+            <div className={styles.buttonGroup}>
+                <button
+                    onClick={handleGoBack}
+                    className={styles.unhoveredButton}
+                >
+                    GO BACK
+                </button>
+                {/* <DeclineButton onClick={handleDecline} /> */}
+            </div>
+            <div className={styles.mobileButtonGroup}>
+                <button
+                    onClick={handleGoBack}
+                    className={styles.unhoveredButton}
+                >
+                    GO BACK
+                </button>
+                {/* <DeclineButton onClick={handleDecline} /> */}
+            </div>
+        </div>
+    );
+}

components/Profile/RSVP/ModalViews/Rejected.tsx

@@ -0,0 +1,24 @@
+import styles from "./styles.module.scss";
+
+type RejectedProps = {
+    handleCancel: () => void;
+};
+
+export default function Rejected({}: RejectedProps) {
+    return (
+        <div className={styles.container}>
+            <b>
+                Unfortunately, we were unable to offer you a spot at
+                HackIllinois
+            </b>
+            <b>
+                Email us at{" "}
+                <a href="mailto:[email protected]">
+                    [email protected]
+                </a>{" "}
+                if you have any questions!
+            </b>
+            {/* <OkButton onClick={handleCancel} /> */}
+        </div>
+    );
+}

util/api.ts

@@ -134,6 +134,20 @@ export async function getRSVP(): Promise<RSVPType> {
     return res;
 }
 
+export async function RSVPDecideAccept() {
+    const res = await requestv2("PUT", "/admission/rsvp/accept").catch(body =>
+        handleError(body)
+    );
+    return res;
+}
+
+export async function RSVPDecideDecline() {
+    const res = await requestv2("PUT", "/admission/rsvp/decline").catch(body =>
+        handleError(body)
+    );
+    return res;
+}
+
 export async function uploadFile(file: File): Promise<unknown> {
     const { url, fields } = await requestv2("GET", "/s3/upload");
     const data = new FormData();