IH Schedule Page 2025

apps/site/src/app/(main)/(home)/sections/Landing/About/About.tsx

@@ -7,19 +7,19 @@ const About = () => {
 	return (
 		<div className="w-full absolute bottom-0 lg:bottom-[30vh] flex justify-center aspect-[12/5] max-lg:[h-1000px]">
 			<div className="w-full h-full absolute bottom-0 max-lg:hidden">
-				<Image src={LgStar} alt="*" className="absolute top-[30%] left-10" />
+				<Image src={LgStar} alt="✦" className="absolute top-[30%] left-10" />
 				<Image
 					src={SmStar}
-					alt="*"
+					alt="✦"
 					className="absolute bottom-[30%] left-[7%]"
 				/>
 
-				<Image src={LgStar} alt="*" className="absolute bottom-0 left-20" />
+				<Image src={LgStar} alt="✦" className="absolute bottom-0 left-20" />
 
-				<Image src={LgStar} alt="*" className="absolute top-[40%] right-10" />
+				<Image src={LgStar} alt="✦" className="absolute top-[40%] right-10" />
 				<Image
 					src={SmStar}
-					alt="*"
+					alt="✦"
 					className="absolute bottom-[20%] right-[7%]"
 				/>
 			</div>

apps/site/src/app/(main)/layout.tsx

@@ -19,7 +19,7 @@ export default function Layout({ children }: PropsWithChildren) {
 	return (
 		<div
 			style={{ backgroundImage: `url(${stars.src})` }}
-			className="overflow-x-hidden bg-top bg-repeat-y bg-[length:100%]"
+			className="overflow-x-hidden bg-top bg-repeat-y bg-[length:100%] relative"
 		>
 			<Suspense fallback={<BaseNavbar />}>
 				<NavbarParent />

apps/site/src/app/(main)/schedule/EventProps.ts

@@ -1,5 +1,5 @@
 export default interface EventProps {
-	now: Date;
+	now?: Date;
 	title: string;
 	eventType: string;
 	location?: string | undefined;

apps/site/src/app/(main)/schedule/components/BarLoader.tsx

@@ -1,18 +1,16 @@
 import { motion, Variants } from "framer-motion";
+import { SwordsIcon } from "lucide-react";
 
 const variants = {
 	initial: {
-		scaleY: 0.5,
 		opacity: 0,
 	},
 	animate: {
-		scaleY: 1,
-		opacity: 1,
+		opacity: 0.7,
 		transition: {
 			repeat: Infinity,
 			repeatType: "mirror",
-			duration: 1,
-			// ease: "circIn",
+			duration: 0.5,
 		},
 	},
 } as Variants;
@@ -27,11 +25,13 @@ const BarLoader = () => {
 			animate="animate"
 			className="flex gap-2"
 		>
-			<motion.div variants={variants} className="h-20 w-4 bg-white" />
-			<motion.div variants={variants} className="h-20 w-4 bg-white" />
-			<motion.div variants={variants} className="h-20 w-4 bg-white" />
-			<motion.div variants={variants} className="h-20 w-4 bg-white" />
-			<motion.div variants={variants} className="h-20 w-4 bg-white" />
+			{Array(5)
+				.fill(0)
+				.map((_, i) => (
+					<motion.div key={i} variants={variants} className="w-20 h-20">
+						<SwordsIcon className="w-full h-full" />
+					</motion.div>
+				))}
 		</motion.div>
 	);
 };

apps/site/src/app/(main)/schedule/components/EventCard.tsx

@@ -1,53 +1,95 @@
-import EventRegular from "./EventRegular";
-import EventAnnouncement from "./EventAnnouncement";
-import EventMiscellaneous from "./EventMiscellaneous";
+/* eslint-disable no-mixed-spaces-and-tabs */
+import { SwordsIcon } from "lucide-react";
+import { motion } from "framer-motion";
+
 import EventProps from "../EventProps";
+import getTimeAndDates from "@/lib/utils/getTimeAndDates";
+
+interface EventCardProps extends EventProps {
+	isHappening: boolean;
+}
 
 export default function EventCard({
-	now,
 	title,
-	eventType,
 	location,
 	virtual,
 	startTime,
 	endTime,
 	organization,
 	hosts,
 	description,
-}: EventProps) {
-	if (eventType === "Announcement") {
-		// description is used as the prop as opposed to title because description is a Portable Text object
-		// that can reflect all text formats put in Sanity
-		return (
-			<EventAnnouncement
-				description={description}
-				startTime={startTime}
-				endTime={endTime}
-			/>
-		);
-	} else if (eventType === "Miscellaneous") {
-		return (
-			<EventMiscellaneous
-				title={title}
-				startTime={startTime}
-				endTime={endTime}
-				description={description}
-			/>
-		);
-	} else {
-		return (
-			<EventRegular
-				now={now}
-				title={title}
-				eventType={eventType}
-				location={location}
-				virtual={virtual}
-				startTime={startTime}
-				endTime={endTime}
-				organization={organization}
-				hosts={hosts}
-				description={description}
-			/>
-		);
-	}
+	isHappening,
+}: EventCardProps) {
+	console.log(title, startTime.getTime() === endTime.getTime());
+	return (
+		<div
+			className={`w-[90%] min-w-[200px] h-full bg-black border-4 border-white relative p-16 font-display max-lg:w-full ${
+				isHappening &&
+				"max-lg:bg-blue-100 max-lg:border-blue-900 max-lg:text-blue-950 max-lg:top-[-8px] max-lg:left-[-8px]"
+			}`}
+		>
+			{title ? (
+				<>
+					<div>
+						<div className="flex justify-between gap-5 max-lg:flex-col">
+							<div className="h-fit w-full flex justify-between items-center">
+								<h1 className="text-4xl max-w-[80%] max-sm:text-3xl">
+									{title}
+								</h1>
+								{isHappening && (
+									<motion.div
+										className="min-w-[50px] max-[400px]:hidden"
+										animate={{ y: ["0%", "-10%", "0%"] }}
+										transition={{
+											repeat: Infinity,
+											duration: 2,
+											ease: "easeInOut",
+										}}
+									>
+										<SwordsIcon width={50} height={50} color="rgb(23 37 84)" />
+									</motion.div>
+								)}
+							</div>
+							<p className="text-2xl">{getTimeAndDates(startTime).day}</p>
+						</div>
+						<div className="pt-5">
+							<div className="w-full flex justify-between gap-5 max-lg:flex-col ">
+								<p className="text-2xl">
+									<span>Location: </span>
+									{virtual ? <a>Zoom</a> : location}
+								</p>
+								{organization && <p className="text-xl">By: {organization}</p>}
+							</div>
+							<p className="text-xl">{`Time: ${
+								startTime.getTime() === endTime.getTime()
+									? `${getTimeAndDates(endTime).compositeTimeHourMinute} ${
+											getTimeAndDates(endTime).amPm
+									  }`
+									: `${getTimeAndDates(startTime).compositeTimeHourMinute} - ${
+											getTimeAndDates(endTime).compositeTimeHourMinute
+									  } ${getTimeAndDates(endTime).amPm}`
+							}`}</p>
+						</div>
+					</div>
+					<div
+						className={`w-full h-[2px] ${
+							isHappening ? "bg-blue-900" : "bg-white"
+						} mt-4 mb-4`}
+					/>
+					<div>
+						{hosts && (
+							<div className="text-2xl">{`Hosted By: ${hosts?.join(
+								", ",
+							)}`}</div>
+						)}
+						<div className="text-xl pt-5">{description}</div>
+					</div>
+				</>
+			) : (
+				<div className="text-4xl w-full h-full flex justify-center items-center">
+					No Event Selected...
+				</div>
+			)}
+		</div>
+	);
 }

apps/site/src/app/(main)/schedule/components/EventPlaque.module.scss

@@ -0,0 +1,7 @@
+.plaqueHover {
+	transform: translate(-3px, -3px);
+}
+
+.decorHover {
+	transform: translate(4px, 4px);
+}

apps/site/src/app/(main)/schedule/components/EventPlaque.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable no-mixed-spaces-and-tabs */
+"use client";
+
+import { useState } from "react";
+import { forwardRef } from "react";
+import { SwordsIcon } from "lucide-react";
+import { motion } from "framer-motion";
+
+import getTimeAndDates from "@/lib/utils/getTimeAndDates";
+
+import styles from "./EventPlaque.module.scss";
+
+interface EventPlaqueProps {
+	title: string;
+	startTime: Date;
+	endTime: Date;
+	isHappening: boolean;
+	onClick: (title: string) => void;
+}
+
+export default forwardRef(function EventPlaque(
+	{ title, startTime, endTime, isHappening, onClick }: EventPlaqueProps,
+	ref: React.LegacyRef<HTMLDivElement>,
+) {
+	const [hovered, setHovered] = useState(false);
+
+	const start = getTimeAndDates(startTime);
+	const end = getTimeAndDates(endTime);
+
+	return (
+		<div
+			className="duration-500 relative min-w-[200px] h-fit cursor-pointer"
+			onMouseEnter={() => setHovered(true)}
+			onMouseLeave={() => setHovered(false)}
+			ref={ref}
+			onClick={() => onClick(title)}
+		>
+			<div
+				className={
+					isHappening
+						? "duration-500 font-display p-5 w-full h-fit border-4 bg-blue-100 border-blue-900 text-blue-950 top-[-8px] left-[-8px]"
+						: `duration-500 font-display p-5 w-full h-fit border-4 top-0 left-0 ${
+								hovered
+									? `bg-white border-black text-black top-[-5px] left-[-5px] ${styles.plaqueHover}`
+									: "bg-black border-white"
+						  }`
+				}
+			>
+				<div
+					className={
+						isHappening
+							? "text-2xl flex justify-between min-h-[50px] gap-5 items-center"
+							: `text-2xl`
+					}
+				>
+					<span>{title}</span>
+					{isHappening && (
+						<motion.div
+							className="min-w-[50px]"
+							animate={{ y: ["0%", "-10%", "0%"] }}
+							transition={{
+								repeat: Infinity,
+								duration: 2,
+								ease: "easeInOut",
+							}}
+						>
+							<SwordsIcon width={50} height={50} color="rgb(23 37 84)" />
+						</motion.div>
+					)}
+				</div>
+				<div className="text-lg">
+					<div>
+						{startTime.getTime() === endTime.getTime()
+							? `${end.compositeTimeHourMinute} ${end.amPm}`
+							: `${start.compositeTimeHourMinute} - ${end.compositeTimeHourMinute} ${end.amPm}`}
+					</div>
+				</div>
+			</div>
+			<div
+				className={
+					isHappening
+						? "absolute w-full h-full top-[9px] left-[9px] z-[-1] duration-500 bg-blue-100"
+						: `absolute w-full h-full top-0 left-0 z-[-1] duration-500 bg-white ${
+								hovered && styles.decorHover
+						  }`
+				}
+			/>
+		</div>
+	);
+});