From c586e02d5ed699834a6cfd43499de16cdbcd9a7f Mon Sep 17 00:00:00 2001
From: cyril <97067553+cyriljoby@users.noreply.github.com>
Date: Tue, 17 Dec 2024 01:54:46 -0800
Subject: [PATCH] Links to other apps (#502)

* added links to other applications at bottom of page

* make not dependent on array indexing

* replace standard a tag with next Link

---------

Co-authored-by: Cyril Joby <cyriljoby@Cyrils-MacBook-Pro.local>
---
 .../ApplyConfirmation/ConfirmationDetails.tsx | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/apps/site/src/lib/components/forms/shared/ApplyConfirmation/ConfirmationDetails.tsx b/apps/site/src/lib/components/forms/shared/ApplyConfirmation/ConfirmationDetails.tsx
index a61520bf..ccb545ca 100644
--- a/apps/site/src/lib/components/forms/shared/ApplyConfirmation/ConfirmationDetails.tsx
+++ b/apps/site/src/lib/components/forms/shared/ApplyConfirmation/ConfirmationDetails.tsx
@@ -1,4 +1,5 @@
 import Button from "@/lib/components/Button/Button";
+import Link from "next/link";
 
 interface ConfirmationDetailsProps {
 	isLoggedIn: boolean;
@@ -15,6 +16,9 @@ export default async function ConfirmationDetails({
 	roleText,
 	role,
 }: ConfirmationDetailsProps) {
+	const otherRoles = ["Hacker", "Mentor", "Volunteer"].filter(
+		(r) => r !== role,
+	);
 	return (
 		<div className="flex flex-col items-center gap-8 px-4 py-6 mx-4 max-w-screen-lg md:p-6 md:px-10 md:py-8 border-[2px] md:border-[5px] border-[var(--color-white)] text-[var(--color-white)] bg-[var(--color-black)]">
 			<h1 className="text-5xl text-center">Before Applying</h1>
@@ -61,6 +65,22 @@ export default async function ConfirmationDetails({
 				}
 				isLightVersion
 			/>
+
+			<p>
+				Interested in being a{" "}
+				{otherRoles.map((role, index) => (
+					<span key={role}>
+						<Link
+							href={role === "Hacker" ? `/apply` : `/${role.toLowerCase()}`}
+							className="text-[#FBA80A] underline"
+						>
+							{role}
+						</Link>
+						{index < otherRoles.length - 1 ? " or " : " "}
+					</span>
+				))}
+				instead?
+			</p>
 		</div>
 	);
 }