feat: portal page

apps/site/src/app/portal/Message.tsx

@@ -0,0 +1,36 @@
+import { PortalStatus } from "./page";
+
+interface MessageProps {
+	status: PortalStatus;
+}
+
+function Message({ status }: MessageProps) {
+	const submittedMessage = (
+		<p>
+			Thank you for submitting your application! We are currently
+			reviewing applications on a rolling basis, and you will hear back
+			from us soon!
+		</p>
+	);
+
+	const messages: Record<PortalStatus, JSX.Element> = {
+		[PortalStatus.pending]: submittedMessage,
+		[PortalStatus.reviewed]: submittedMessage,
+		[PortalStatus.rejected]: (
+			<p>
+				Thank you for applying to IrvineHacks this year. We have read
+				through many applications so far, and unfortunately are unable
+				to offer you a spot at our event. We highly encourage you to
+				continue developing your skills and passion for technology. We
+				would love to see you apply again next year!
+			</p>
+		),
+		[PortalStatus.waitlisted]: <></>,
+		[PortalStatus.accepted]: <></>,
+		[PortalStatus.confirmed]: <></>,
+	};
+
+	return <div className="">{messages[status]}</div>;
+}
+
+export default Message;

apps/site/src/app/portal/Portal.module.scss

@@ -0,0 +1,3 @@
+.title {
+	text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
+}

apps/site/src/app/portal/VerticalTimeline.tsx

@@ -0,0 +1,89 @@
+import Image from "next/image";
+
+import BorderCircle from "@/assets/icons/border-circle.svg";
+import CheckCircle from "@/assets/icons/check-circle-fill.svg";
+import XCircle from "@/assets/icons/x-circle-fill.svg";
+
+import { PortalStatus } from "./page";
+
+interface VerticalTimelineProps {
+	status: string;
+}
+
+function VerticalTimeline({ status }: VerticalTimelineProps) {
+	const submission_component = (
+		<li className="flex flex-row items-center">
+			<Image
+				src={CheckCircle}
+				alt="checked-circle"
+				width={25}
+				height={25}
+				className="m-6 mr-12"
+			/>
+			Application submitted
+		</li>
+	);
+
+	const verdict_component =
+		status === PortalStatus.accepted ||
+		status === PortalStatus.confirmed ? (
+			<li className="flex flex-row items-center border-t">
+				<Image
+					src={CheckCircle}
+					alt="checked-circle"
+					width={25}
+					height={25}
+					className="m-6 mr-12"
+				/>
+				Application accepted
+			</li>
+		) : status === PortalStatus.rejected ? (
+			<li className="flex flex-row items-center border-t">
+				<Image
+					src={XCircle}
+					alt="checked-circle"
+					width={25}
+					height={25}
+					className="m-6 mr-12"
+				/>
+				Application rejected
+			</li>
+		) : null;
+
+	const rsvp_component =
+		status === PortalStatus.accepted ? (
+			<li className="flex flex-row items-center border-t">
+				<Image
+					src={BorderCircle}
+					alt="border-circle"
+					width={25}
+					height={25}
+					className="m-6 mr-12"
+				/>
+				Confirm attendance
+			</li>
+		) : status === PortalStatus.confirmed ? (
+			<li className="flex flex-row items-center border-t">
+				<Image
+					src={CheckCircle}
+					alt="checked-circle"
+					width={25}
+					height={25}
+					className="m-6 mr-12"
+				/>
+				Attendance confirmed
+			</li>
+		) : null;
+
+	return (
+		<div className="p-3">
+			<ul className="border rounded-lg">
+				{submission_component}
+				{verdict_component}
+				{rsvp_component}
+			</ul>
+		</div>
+	);
+}
+
+export default VerticalTimeline;

apps/site/src/app/portal/page.tsx

@@ -0,0 +1,45 @@
+import Head from "next/head";
+import axios from "axios";
+
+import styles from "./Portal.module.scss";
+
+import VerticalTimeline from "./VerticalTimeline";
+import Message from "./Message";
+
+export const enum PortalStatus {
+	pending = "PENDING_REVIEW",
+	reviewed = "REVIEWED",
+	accepted = "ACCEPTED",
+	rejected = "REJECTED",
+	waitlisted = "WAITLISTED",
+	confirmed = "CONFIRMED",
+}
+
+export default async function Portal() {
+	// const res = await axios.get(`/api/user/me`);
+	// const identity = res.data;
+
+	const status = PortalStatus.pending;
+
+	return (
+		<>
+			<section className=" w-full flex items-center flex-col">
+				<div className="m-24">
+					<Head>
+						<title>Portal | IrvineHacks 2024</title>
+					</Head>
+					<h1
+						className={`${styles.title} font-display sm:text-[3rem] text-[#fffce2] text-6xl text-center`}
+					>
+						Portal
+					</h1>
+				</div>
+				<div className="bg-white text-black max-w-4xl rounded-2xl p-6 flex flex-col mb-24 w-full">
+					<h2 className="text-4xl font-semibold">Status</h2>
+					<VerticalTimeline status={status} />
+					<Message status={status as PortalStatus} />
+				</div>
+			</section>
+		</>
+	);
+}