Merge pull request #119 from tasc-nmamit/hackathon

UI fixes and enhance submissions
tasc-nmamit · Nov 15, 2023 · 35fda11 · 35fda11
2 parents 2ef4c2d + b144cee
commit 35fda11
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 130 deletions.
diff --git a/src/lib/components/Auth/AuthButton.svelte b/src/lib/components/Auth/AuthButton.svelte
@@ -4,8 +4,7 @@
 	import { Button } from '$lib/components/ui/custom_button';
 	import * as Popover from '$lib/components/ui/custom_popover';
 
-	import { auth, userData, userLoaded } from '$lib/firebase/firebase';
-	import { user } from '$lib/firebase/firebase';
+	import { auth, user, userData, userLoaded } from '$lib/firebase/firebase';
 
 	import { GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';
 
@@ -28,7 +27,7 @@
 {:else if $user && $userData}
 	<Popover.Root>
 		<Popover.Trigger>
-			<Button class="text-lg font-bold duration-200 hover:scale-110" variant="ghost">You</Button>
+			<Button class="border text-base font-bold transition-all duration-300 ease-in-out hover:bg-[#020817]" variant="ghost">You</Button>
 		</Popover.Trigger>
 		<Popover.Content>
 			<div class="flex max-w-xs flex-col gap-2">

diff --git a/src/lib/components/Hackathon/Submission.svelte b/src/lib/components/Hackathon/Submission.svelte
@@ -59,8 +59,8 @@
 	}
 </script>
 
-<h2 class="pb-4 text-center font-jbExtrabold text-2xl md:text-4xl">Submit solution for your problem statement</h2>
-
+<h1 class="pb-4 text-center font-jbExtrabold text-2xl md:text-4xl">Submit solution for your problem statement</h1>
+<h2 class="text-md pb-4 text-center font-jbRegular md:text-lg">You can change your submissions until 19 Nov 2023</h2>
 <div class="flex w-full flex-grow px-2 md:px-6">
 	<div class="flex w-full flex-shrink flex-col items-center justify-center rounded-2xl border-[1px] border-[#d2b863] p-6 md:p-10">
 		<select bind:value={PID} class="mb-4 h-12 w-full rounded-2xl bg-gray-600 text-center font-jbMedium">
@@ -73,16 +73,17 @@
 		</select>
 
 		<select bind:value={college} class="mb-4 h-12 w-full rounded-2xl bg-gray-600 text-center font-jbMedium">
-			<option value="" disabled selected>College</option>
+			<!-- <option value="" disabled selected>College</option> -->
 			{#each collegeList as college}
 				<option value={college}>
 					{college}
 				</option>
 			{/each}
+			<option value={college} disabled selected>Select / Write your college name</option>
 		</select>
 
 		{#if collegeEntered && (college == 'Other' || !collegeList.includes(college))}
-			<Input type="text" bind:value={college} placeholder="College Name" class="mb-4 h-12  rounded-2xl bg-gray-600 p-4 text-center font-jbMedium text-white md:h-14 " />
+			<Input type="text" bind:value={college} placeholder="College Name" class="mb-4 h-12 rounded-2xl bg-gray-600 p-4 text-center font-jbMedium text-white md:h-14 " />
 		{/if}
 
 		<Input type="text" bind:value={title} placeholder="Title for your solution" class="mb-4 h-12 rounded-2xl bg-gray-600 p-4 text-center font-jbMedium text-white md:h-14 " />

diff --git a/src/lib/components/HeaderFooter/Navbar.svelte b/src/lib/components/HeaderFooter/Navbar.svelte
@@ -1,7 +1,7 @@
 <script>
-	import { NAVITEM } from '$lib/data/NavbarItems';
 	import AuthButton from '$lib/components/Auth/AuthButton.svelte';
 	import ThemeToggle from '$lib/components/HeaderFooter/ThemeToggle.svelte';
+	import { NAVITEM } from '$lib/data/NavbarItems';
 	let y = 0;
 	const closeMenu = () => {
 		// @ts-ignore
@@ -13,27 +13,25 @@
 
 <div class="z-50">
 	<div class="fixed top-0 z-50 hidden w-full md:grid">
-		<div class={`md: flex items-center justify-between px-6 py-2 md:px-10 md:py-6 ${y > 0 ? 'backdrop-blur-xl' : ''}`}>
-			<a href="/">
+		<div class={`md: flex items-center justify-center px-6 py-2 md:px-10 md:py-6 ${y > 0 ? 'backdrop-blur-xl' : ''}`}>
+			<a href="/" class="absolute left-14">
 				<img src="/TASCLogo.png" class="w-20" alt="logo" />
 			</a>
 			<ul class="flex flex-wrap items-center space-x-8 tracking-wider md:text-lg">
 				{#each NAVITEM as nav}
 					<div class="transition duration-300 hover:drop-shadow-[0_0_0.3rem_#ffffff]"><a href={`${nav.href}`} class="scroll-smooth underline-offset-8 transition duration-300 hover:drop-shadow-[0_0_0.2rem_#460a07]">{nav.title}</a></div>
 				{/each}
 			</ul>
-			<div class="flex w-28 justify-center space-x-5">
+			<div class="absolute right-10 flex w-28 justify-center">
 				<AuthButton />
 			</div>
 		</div>
 	</div>
 
 	<div class="fixed z-50 flex w-full px-10 py-6 md:hidden">
-		<div>
-			<a href="/">
-				<img src="/TASCLogo.png" class="w-20" alt="logo" />
-			</a>
-		</div>
+		<a href="/">
+			<img src="/TASCLogo.png" class="w-20" alt="logo" />
+		</a>
 		<nav>
 			<div id="menuToggle" class="py-6 pr-3">
 				<input type="checkbox" />

diff --git a/src/lib/components/types/TeamData.ts b/src/lib/components/types/TeamData.ts
@@ -1,5 +1,6 @@
 export interface Submission {
 	PID?: string;
+	college?: string;
 	link?: string;
 	title?: string;
 }

diff --git a/src/routes/(navbar)/+page.svelte b/src/routes/(navbar)/+page.svelte
@@ -393,13 +393,11 @@
 			<p class="text-xl">Welcome to the official website of TASC,<br /> Department of Artificial Intelligence and Machine Learning</p>
 		</div>
 
-		<div class="absolute bottom-20 flex w-full items-center justify-center">
+		<div class="absolute bottom-10 flex w-full animate-bounce items-center justify-center bg-transparent">
 			<a href="/#about">
-				<div class="absolute animate-bounce bg-transparent">
-					<svg width="74" height="74" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<path d="M65.2726 18.5L69.375 22.1445L37 55.5L4.625 22.1445L8.72738 18.5L37 47.6283L65.2726 18.5Z" fill="white" />
-					</svg>
-				</div>
+				<svg width="50" height="50" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M65.2726 18.5L69.375 22.1445L37 55.5L4.625 22.1445L8.72738 18.5L37 47.6283L65.2726 18.5Z" fill="white" />
+				</svg>
 			</a>
 		</div>
 	</div>
@@ -746,7 +744,7 @@
 							<p class="text-transparent">Committee</p>
 						</div>
 						<div>
-							<p class=" pt-10 text-center text-lg">Register for our 24-hour intercollegiate hackathon today!</p>
+							<p class="pt-10 text-center text-lg">Register for our 24-hour intercollegiate hackathon today!</p>
 							<div class="flex w-full justify-center pt-4">
 								<a href="/snh2023">
 									<button class="rounded-full bg-orange-500 px-4 py-2 duration-300 hover:scale-110">Join Hackathon</button>
@@ -757,16 +755,17 @@
 				</div>
 			</div>
 
-			<div class="flex w-full justify-center text-center">
-				<p class="text-sm">Welcome to the official website of TASC,<br /> Department of Artificial Intelligence and Machine Learning</p>
+			<div class="flex w-full justify-center">
+				<p class="text-center text-sm">Welcome to the official website of TASC,<br /> Department of Artificial Intelligence and Machine Learning</p>
 			</div>
-			<a href="/#about">
-				<div class="absolute mt-6 flex w-full animate-bounce justify-center">
-					<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+			<div class="mt-6 flex w-full animate-bounce justify-center">
+				<a href="/#about">
+					<svg width="40" height="40" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<path d="M37.9287 10.75L40.3125 12.8678L21.5 32.25L2.6875 12.8678L5.07131 10.75L21.5 27.6759L37.9287 10.75Z" fill="white" />
 					</svg>
-				</div>
-			</a>
+				</a>
+			</div>
 		</div>
 	</div>
 

diff --git a/src/routes/snh2023/team/[teamURL]/+page.svelte b/src/routes/snh2023/team/[teamURL]/+page.svelte
@@ -1,73 +1,95 @@
 <script lang="ts">
-	import MainButton from '$lib/components/Hackathon/MainButton.svelte';
 	import { copy } from 'svelte-copy';
-	import type { PageData } from './$types';
+	import MainButton from '$lib/components/Hackathon/MainButton.svelte';
 	import LeaveTeam from '$lib/components/Hackathon/LeaveTeam.svelte';
 	import Submission from '$lib/components/Hackathon/Submission.svelte';
+	import { doc, getDoc } from 'firebase/firestore';
+	import { db } from '$lib/firebase/firebase';
+	import { page } from '$app/stores';
+	import type { TeamData } from '$lib/components/types/TeamData';
+	import { onMount } from 'svelte';
+
+	let teamURL = $page.params.teamURL;
+	let data: TeamData;
 
-	export let data: PageData;
+	async function getData() {
+		const teamRef = doc(db, 'snh2023', teamURL);
+		const docSnap = await getDoc(teamRef);
+
+		if (docSnap.exists()) {
+			data = docSnap.data() as TeamData;
+			console.log(data);
+		} else {
+			alert('Team error! Register again and then come back to this page');
+		}
+	}
+
+	onMount(async () => {
+		await getData();
+	});
 </script>
 
-<!-- Not in a team -->
-<div class="flex h-full min-h-screen w-full flex-col items-center justify-center space-y-6 pt-[8dvh]">
-	<h2 class="pt-4 font-jbExtrabold text-3xl md:text-4xl">Your Team</h2>
+{#if data}
+	<div class="flex h-full min-h-screen w-full flex-col items-center justify-center space-y-6 pt-[8dvh]">
+		<h2 class="pt-4 font-jbExtrabold text-3xl md:text-4xl">Your Team</h2>
 
-	<div class="text-md mx-5 w-[23rem] cursor-default rounded-2xl border-[1px] border-[#d2b863] bg-gray-400 bg-opacity-5 px-5 py-2 backdrop-blur-sm transition duration-300 md:w-[35rem] md:p-10 md:text-2xl">
-		<ul class="mt-5 space-y-2">
-			<p class="font-jbRegular">Team Name: <span class="text-[#fffba4]">{data.teamName}</span></p>
-			<p class="flex items-center space-x-2 font-jbRegular">
-				Team ID:
-				<span class="pl-3 text-[#fffba4]">{data.teamURL}</span>
+		<div class="text-md mx-5 w-[23rem] cursor-default rounded-2xl border-[1px] border-[#d2b863] bg-gray-400 bg-opacity-5 px-5 py-2 backdrop-blur-sm transition duration-300 md:w-[35rem] md:p-10 md:text-2xl">
+			<ul class="mt-5 space-y-2">
+				<p class="font-jbRegular">Team Name: <span class="text-[#fffba4]">{data.teamName}</span></p>
+				<p class="flex items-center space-x-2 font-jbRegular">
+					Team ID:
+					<span class="pl-3 text-[#fffba4]">{data.teamURL}</span>
 
-				<button class="rounded-x rounded-lg bg-gray-600 p-1" use:copy={data.teamURL} on:svelte-copy={() => alert('Team ID copied to clipboard!')}>
-					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-						><path
-							fill="currentColor"
-							fill-rule="evenodd"
-							d="M15 1.25h-4.056c-1.838 0-3.294 0-4.433.153c-1.172.158-2.121.49-2.87 1.238c-.748.749-1.08 1.698-1.238 2.87c-.153 1.14-.153 2.595-.153 4.433V16a3.751 3.751 0 0 0 3.166 3.705c.137.764.402 1.416.932 1.947c.602.602 1.36.86 2.26.982c.867.116 1.97.116 3.337.116h3.11c1.367 0 2.47 0 3.337-.116c.9-.122 1.658-.38 2.26-.982c.602-.602.86-1.36.982-2.26c.116-.867.116-1.97.116-3.337v-5.11c0-1.367 0-2.47-.116-3.337c-.122-.9-.38-1.658-.982-2.26c-.531-.53-1.183-.795-1.947-.932A3.751 3.751 0 0 0 15 1.25Zm2.13 3.021A2.25 2.25 0 0 0 15 2.75h-4c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812c-.423.423-.677 1.003-.812 2.009c-.138 1.028-.14 2.382-.14 4.289v6a2.25 2.25 0 0 0 1.521 2.13c-.021-.61-.021-1.3-.021-2.075v-5.11c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117h3.11c.775 0 1.464 0 2.074.021ZM7.408 6.41c.277-.277.665-.457 1.4-.556c.754-.101 1.756-.103 3.191-.103h3c1.435 0 2.436.002 3.192.103c.734.099 1.122.28 1.399.556c.277.277.457.665.556 1.4c.101.754.103 1.756.103 3.191v5c0 1.435-.002 2.436-.103 3.192c-.099.734-.28 1.122-.556 1.399c-.277.277-.665.457-1.4.556c-.755.101-1.756.103-3.191.103h-3c-1.435 0-2.437-.002-3.192-.103c-.734-.099-1.122-.28-1.399-.556c-.277-.277-.457-.665-.556-1.4c-.101-.755-.103-1.756-.103-3.191v-5c0-1.435.002-2.437.103-3.192c.099-.734.28-1.122.556-1.399Z"
-							clip-rule="evenodd"
-						/></svg
-					>
-				</button>
-			</p>
+					<button class="rounded-x rounded-lg bg-gray-600 p-1" use:copy={data.teamURL} on:svelte-copy={() => alert('Team ID copied to clipboard!')}>
+						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+							><path
+								fill="currentColor"
+								fill-rule="evenodd"
+								d="M15 1.25h-4.056c-1.838 0-3.294 0-4.433.153c-1.172.158-2.121.49-2.87 1.238c-.748.749-1.08 1.698-1.238 2.87c-.153 1.14-.153 2.595-.153 4.433V16a3.751 3.751 0 0 0 3.166 3.705c.137.764.402 1.416.932 1.947c.602.602 1.36.86 2.26.982c.867.116 1.97.116 3.337.116h3.11c1.367 0 2.47 0 3.337-.116c.9-.122 1.658-.38 2.26-.982c.602-.602.86-1.36.982-2.26c.116-.867.116-1.97.116-3.337v-5.11c0-1.367 0-2.47-.116-3.337c-.122-.9-.38-1.658-.982-2.26c-.531-.53-1.183-.795-1.947-.932A3.751 3.751 0 0 0 15 1.25Zm2.13 3.021A2.25 2.25 0 0 0 15 2.75h-4c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812c-.423.423-.677 1.003-.812 2.009c-.138 1.028-.14 2.382-.14 4.289v6a2.25 2.25 0 0 0 1.521 2.13c-.021-.61-.021-1.3-.021-2.075v-5.11c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117h3.11c.775 0 1.464 0 2.074.021ZM7.408 6.41c.277-.277.665-.457 1.4-.556c.754-.101 1.756-.103 3.191-.103h3c1.435 0 2.436.002 3.192.103c.734.099 1.122.28 1.399.556c.277.277.457.665.556 1.4c.101.754.103 1.756.103 3.191v5c0 1.435-.002 2.436-.103 3.192c-.099.734-.28 1.122-.556 1.399c-.277.277-.665.457-1.4.556c-.755.101-1.756.103-3.191.103h-3c-1.435 0-2.437-.002-3.192-.103c-.734-.099-1.122-.28-1.399-.556c-.277-.277-.457-.665-.556-1.4c-.101-.755-.103-1.756-.103-3.191v-5c0-1.435.002-2.437.103-3.192c.099-.734.28-1.122.556-1.399Z"
+								clip-rule="evenodd"
+							/></svg
+						>
+					</button>
+				</p>
 
-			<p class="font-jbRegular">
-				Team Secret:
-				<span class="text-[#fffba4]">{data.teamSecret}</span>
-				<button class="rounded-x rounded-lg bg-gray-600 p-1" use:copy={data.teamSecret} on:svelte-copy={() => alert('Team Secret copied to clipboard!')}>
-					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-						><path
-							fill="currentColor"
-							fill-rule="evenodd"
-							d="M15 1.25h-4.056c-1.838 0-3.294 0-4.433.153c-1.172.158-2.121.49-2.87 1.238c-.748.749-1.08 1.698-1.238 2.87c-.153 1.14-.153 2.595-.153 4.433V16a3.751 3.751 0 0 0 3.166 3.705c.137.764.402 1.416.932 1.947c.602.602 1.36.86 2.26.982c.867.116 1.97.116 3.337.116h3.11c1.367 0 2.47 0 3.337-.116c.9-.122 1.658-.38 2.26-.982c.602-.602.86-1.36.982-2.26c.116-.867.116-1.97.116-3.337v-5.11c0-1.367 0-2.47-.116-3.337c-.122-.9-.38-1.658-.982-2.26c-.531-.53-1.183-.795-1.947-.932A3.751 3.751 0 0 0 15 1.25Zm2.13 3.021A2.25 2.25 0 0 0 15 2.75h-4c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812c-.423.423-.677 1.003-.812 2.009c-.138 1.028-.14 2.382-.14 4.289v6a2.25 2.25 0 0 0 1.521 2.13c-.021-.61-.021-1.3-.021-2.075v-5.11c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117h3.11c.775 0 1.464 0 2.074.021ZM7.408 6.41c.277-.277.665-.457 1.4-.556c.754-.101 1.756-.103 3.191-.103h3c1.435 0 2.436.002 3.192.103c.734.099 1.122.28 1.399.556c.277.277.457.665.556 1.4c.101.754.103 1.756.103 3.191v5c0 1.435-.002 2.436-.103 3.192c-.099.734-.28 1.122-.556 1.399c-.277.277-.665.457-1.4.556c-.755.101-1.756.103-3.191.103h-3c-1.435 0-2.437-.002-3.192-.103c-.734-.099-1.122-.28-1.399-.556c-.277-.277-.457-.665-.556-1.4c-.101-.755-.103-1.756-.103-3.191v-5c0-1.435.002-2.437.103-3.192c.099-.734.28-1.122.556-1.399Z"
-							clip-rule="evenodd"
-						/></svg
-					>
-				</button>
-			</p>
+				<p class="font-jbRegular">
+					Team Secret:
+					<span class="text-[#fffba4]">{data.teamSecret}</span>
+					<button class="rounded-x rounded-lg bg-gray-600 p-1" use:copy={data.teamSecret} on:svelte-copy={() => alert('Team Secret copied to clipboard!')}>
+						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+							><path
+								fill="currentColor"
+								fill-rule="evenodd"
+								d="M15 1.25h-4.056c-1.838 0-3.294 0-4.433.153c-1.172.158-2.121.49-2.87 1.238c-.748.749-1.08 1.698-1.238 2.87c-.153 1.14-.153 2.595-.153 4.433V16a3.751 3.751 0 0 0 3.166 3.705c.137.764.402 1.416.932 1.947c.602.602 1.36.86 2.26.982c.867.116 1.97.116 3.337.116h3.11c1.367 0 2.47 0 3.337-.116c.9-.122 1.658-.38 2.26-.982c.602-.602.86-1.36.982-2.26c.116-.867.116-1.97.116-3.337v-5.11c0-1.367 0-2.47-.116-3.337c-.122-.9-.38-1.658-.982-2.26c-.531-.53-1.183-.795-1.947-.932A3.751 3.751 0 0 0 15 1.25Zm2.13 3.021A2.25 2.25 0 0 0 15 2.75h-4c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812c-.423.423-.677 1.003-.812 2.009c-.138 1.028-.14 2.382-.14 4.289v6a2.25 2.25 0 0 0 1.521 2.13c-.021-.61-.021-1.3-.021-2.075v-5.11c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117h3.11c.775 0 1.464 0 2.074.021ZM7.408 6.41c.277-.277.665-.457 1.4-.556c.754-.101 1.756-.103 3.191-.103h3c1.435 0 2.436.002 3.192.103c.734.099 1.122.28 1.399.556c.277.277.457.665.556 1.4c.101.754.103 1.756.103 3.191v5c0 1.435-.002 2.436-.103 3.192c-.099.734-.28 1.122-.556 1.399c-.277.277-.665.457-1.4.556c-.755.101-1.756.103-3.191.103h-3c-1.435 0-2.437-.002-3.192-.103c-.734-.099-1.122-.28-1.399-.556c-.277-.277-.457-.665-.556-1.4c-.101-.755-.103-1.756-.103-3.191v-5c0-1.435.002-2.437.103-3.192c.099-.734.28-1.122.556-1.399Z"
+								clip-rule="evenodd"
+							/></svg
+						>
+					</button>
+				</p>
 
-			<h2 class="pt-4 font-jbExtrabold">Team Members</h2>
-			<div class="flex flex-col space-y-2">
-				{#each data.memberInfo as memberInfo}
-					{#if memberInfo.id == data.leader}
-						<p class="font-jbRegular text-[#fffba4]">👑 {memberInfo.name}</p>
-					{:else}
-						<p class="font-jbRegular text-[#fffba4]">♟️ {memberInfo.name}</p>
-					{/if}
-				{/each}
-			</div>
+				<h2 class="pt-4 font-jbExtrabold">Team Members</h2>
+				<div class="flex flex-col space-y-2">
+					{#each data.memberInfo as memberInfo}
+						{#if memberInfo.id == data.leader}
+							<p class="font-jbRegular text-[#fffba4]">👑 {memberInfo.name}</p>
+						{:else}
+							<p class="font-jbRegular text-[#fffba4]">♟️ {memberInfo.name}</p>
+						{/if}
+					{/each}
+				</div>
 
-			{#if data.memberCount == 3}
-				<p class="font-semibold text-[#fffba4]">Team is full!</p>
-			{:else}
-				<p>You need to add {3 - data.memberCount} more {data.memberCount == 2 ? 'member' : 'members'}</p>
-			{/if}
-		</ul>
-	</div>
+				{#if data.memberCount == 3}
+					<p class="font-semibold text-[#fffba4]">Team is full!</p>
+				{:else}
+					<p>You need to add {3 - data.memberCount} more {data.memberCount == 2 ? 'member' : 'members'}</p>
+				{/if}
+			</ul>
+		</div>
 
-	<LeaveTeam teamID={data.teamURL} memberInfo={data.memberInfo} leader={data.leader} />
-	<div class="flex flex-col items-center justify-center py-8">
-		<Submission teamID={data.teamURL}></Submission>
+		<LeaveTeam teamID={data.teamURL} memberInfo={data.memberInfo} leader={data.leader} />
+		<div class="flex flex-col items-center justify-center py-8">
+			<Submission teamID={data.teamURL} PID={data.submission?.PID} title={data.submission?.title} college={data.submission?.college} link={data.submission?.link}></Submission>
+		</div>
+		<!-- <MainButton>Solution Submission (soon...)</MainButton> -->
 	</div>
-	<!-- <MainButton>Solution Submission (soon...)</MainButton> -->
-</div>
+{/if}
diff --git a/src/routes/snh2023/team/[teamURL]/+page.ts b/src/routes/snh2023/team/[teamURL]/+page.ts