Added Schedule Page (#205)

* initial commit

* added third day

* added some mobile compatibility

* formatting fixes

* mobile fixes + hacking time fix

* styling fix

* added zoom

* open new window

* Moved zoom link to bottom of circle item to match figma

* Changed positions of DayTwo circles for mobile

* Changed positions of DayThree circles for mobile

* Minor change to DayTwo hacking end

* Cleaned up imports and comments

* Removed unused ClipboardSchedule component

* Fixed windowWidth hook and image height warning

* Added mobile path for map3, updated fixed useWindowWidth to fire initially

* removing unused imgs + swap import

* Fixed heights of maps, reordered imports in day components

* font change and module move

* changed rest of font-size to rem, moved import for Circle.tsx

---------

Co-authored-by: IanWearsHat <[email protected]>

apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss

@@ -61,7 +61,8 @@ $item-padding-x: 3rem;
 	padding: $mobile-item-padding-y $mobile-item-padding-x;
 }
 
-.faq-header, .faq-header > * {
+.faq-header,
+.faq-header > * {
 	font-weight: 600;
 }
 

apps/site/src/app/schedule/Assets/Circle.module.scss

@@ -0,0 +1,77 @@
+@use "bootstrap-utils" as bootstrap;
+@use "zothacks-theme" as theme;
+
+.outerCircle {
+	background-color: theme.$white;
+	border: 5px solid theme.$lighter-black;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1;
+	bottom: 0;
+	position: absolute;
+}
+
+.innerCircle {
+	background-color: theme.$red;
+	min-width: 30px;
+	min-height: 30px;
+	border-radius: 50%;
+	transition-duration: 0.5s;
+}
+
+.textContainer {
+	top: 45px;
+	left: 20px;
+	position: absolute;
+	min-width: 150px;
+	transform: translateX(-50%);
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.location {
+	width: 300px;
+	text-align: center;
+	padding: 0;
+	margin: 0;
+	font-size: 1.25rem;
+	@include bootstrap.media-breakpoint-down(md) {
+		font-size: 1rem;
+		width: 160px;
+	}
+}
+
+.title {
+	text-align: center;
+	width: 200px;
+}
+
+.time {
+	text-align: center;
+	padding: 0;
+	margin: 0;
+	font-size: 1.25rem;
+	@include bootstrap.media-breakpoint-down(md) {
+		font-size: 1rem;
+	}
+}
+
+.virtual {
+	display: flex;
+	align-items: baseline;
+	gap: 5px;
+	text-decoration: none;
+	color: theme.$purple;
+	p {
+		margin: 0;
+		padding: 0;
+		font-weight: bold;
+		font-size: 1.25rem;
+	}
+}

apps/site/src/app/schedule/Assets/Circle.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import Image from "next/image";
+
+import convertTime from "../convertTime";
+
+import cross from "@/assets/images/map2/cross.svg";
+import openNewWindow from "@/assets/icons/open_new_window_purple.svg";
+
+import styles from "./Circle.module.scss";
+
+interface CircleProps {
+	title: String;
+	location: String;
+	startTime: Date;
+	endTime: Date;
+	position: object;
+	up: boolean;
+	time: number;
+	virtual: String;
+}
+
+const EventCircle: React.FC<CircleProps> = ({
+	title,
+	location,
+	startTime,
+	endTime,
+	position,
+	up,
+	time,
+	virtual,
+}) => {
+	let curTime = new Date(time);
+	return (
+		<div
+			className={styles.outerCircle}
+			style={
+				title == "Hacking Ends"
+					? {
+							...position,
+							backgroundColor: "transparent",
+							borderColor: "transparent",
+						}
+					: position
+			}
+		>
+			{title == "Hacking Ends" ? (
+				<Image src={cross} alt="x" />
+			) : (
+				<div
+					className={styles.innerCircle}
+					style={
+						curTime >= startTime
+							? curTime > endTime
+								? { backgroundColor: "#01a7c5" }
+								: { backgroundColor: "#ffd600" }
+							: { backgroundColor: "#bd5a5a" }
+					}
+				></div>
+			)}
+			<div className={styles.textContainer} style={up ? { top: "-160px" } : {}}>
+				<h5 className={styles.title}>{title}</h5>
+				<p className={styles.location}>{location}</p>
+				<p className={styles.time}>{convertTime(startTime, endTime)}</p>
+				{virtual && (
+					<a
+						href={`${virtual}`}
+						className={styles.virtual}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<p>Zoom</p>
+						<Image src={openNewWindow} alt="open" />
+					</a>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default EventCircle;