Merge pull request #71 from hack-rpi/feature/Previous_Projects

Feature/previous projects

.gitignore

@@ -34,6 +34,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+amplify_outputs.json
+.amplify
 .env
 
 # amplify

components/interactive-map/interactive-map.tsx

@@ -8,7 +8,7 @@ const links: Link[] = [
 	{ href: "/event/schedule", children: "Schedule" },
 	{ href: "/event/prizes", children: "Prizes" },
 	{ href: "/resources", children: "Resources" },
-	{ href: "/last-year", children: "HackRPI 2023" },
+	{ href: "/last-year", children: "HackRPI X" },
 	{ href: "/sponsor-us", children: "Sponsor Us" },
 ];
 

components/nav-bar/nav-bar.tsx

@@ -24,7 +24,7 @@ export const links: NavGroup[] = [
 		],
 	},
 	{
-		name: "HackRPI 2023",
+		name: "HackRPI X",
 		links: [
 			{ href: "/last-year#winners", children: "Winners" },
 			{ href: "/last-year#photos", children: "Photos" },

components/prev-projects/project-carousel.tsx

@@ -0,0 +1,61 @@
+import Image from "next/image";
+import Carousel from "react-multi-carousel";
+import "react-multi-carousel/lib/styles.css";
+
+export interface ProjectCarouselProps {
+	prizeCategory: string;
+	title: string;
+	authors: string[];
+	description: string;
+	imageUrl: string;
+}
+
+export default function ProjectCarousel({ projects }: { projects: ProjectCarouselProps[] }) {
+	const responsive = {
+		all: {
+			breakpoint: { max: 4000, min: 0 },
+			items: 1,
+		},
+	};
+
+	return (
+		<div className="w-full">
+			<Carousel
+				swipeable={true}
+				draggable={true}
+				showDots={true}
+				responsive={responsive}
+				infinite={true}
+				keyBoardControl={true}
+				ssr={true}
+				containerClass="w-full h-fit rounded-md mb-2"
+			>
+				{projects.map((project, index) => (
+					<div className="w-full h-fit flex items-start justify-center my-4" key={index}>
+						<div className="w-full sm:w-3/4 flex flex-col items-center justify-start bg-silver rounded-md m-4 text-hackrpi-secondary-dark-blue shadow-lg shadow-hackrpi-primary-blue">
+							<div className="flex flex-col-reverse md:flex-row w-full h-fit items-center md:items-start md:justify-center">
+								<div className="flex flex-col w-full md:w-1/2 pl-4 mt-2">
+									<h1 className="w-11/12 text-left text-xl xs:text-2xl sm:text-3xl font-bold font-sans">
+										{project.prizeCategory}
+									</h1>
+									<h2 className="w-11/12 text-left text-2xl font-bold font-sans">{project.title}</h2>
+									<hr className="border-black w-11/12"></hr>
+									<p className="w-11/12 text-left">{project.authors.join(", ")}</p>
+									<hr className="border-black w-11/12"></hr>
+								</div>
+								<Image
+									src={project.imageUrl}
+									alt={project.title}
+									width={500}
+									height={500}
+									className="w-full md:w-1/2 h-fit object-contain mb-2 rounded-md"
+								></Image>
+							</div>
+							<p className="w-full px-4 font-sans text-left my-2">{project.description}</p>
+						</div>
+					</div>
+				))}
+			</Carousel>
+		</div>
+	);
+}

components/prev-projects/project-display.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Image from "next/image";
+
+export interface ProjectDisplayProps {
+	title: string;
+	authors: string[];
+	prizeCategory: string;
+	description: string;
+	imageUrl: string;
+	imageOnLeft: boolean;
+}
+
+export default function ProjectDisplay(props: ProjectDisplayProps) {
+	return (
+		<>
+			<DesktopProjectDisplay {...props} />
+			<MobileProjectDisplay {...props} />
+		</>
+	);
+}
+
+function DesktopProjectDisplay(props: ProjectDisplayProps) {
+	return (
+		<div
+			className={`hidden xl:flex  ${props.imageOnLeft ? "flex-row-reverse" : "flex-row"} items-center justify-between`}
+		>
+			<div className="w-1/2">
+				<h1 className="font-sans font-bold font-white text-4xl">{props.prizeCategory}</h1>
+				<h2 className="font-sans font-bold font-white text-2xl">{props.title}</h2>
+				<hr />
+				<p className="font-sans font-white text-lg text-nowrap">{props.authors.join(", ")}</p>
+				<hr />
+				<p className="mt-2">{props.description}</p>
+			</div>
+			<div className="w-2/5">
+				<Image src={props.imageUrl} alt={props.title} height={500} width={500} />
+			</div>
+		</div>
+	);
+}
+
+function MobileProjectDisplay(props: ProjectDisplayProps) {
+	return (
+		<div className="flex xl:hidden flex-col items-start justify-start w-fit">
+			<div className="w-full flex items-center justify-center">
+				<Image src={props.imageUrl} alt={props.title} height={500} width={500} className="" />
+			</div>
+			<div>
+				<h1 className="font-sans font-bold font-white text-4xl">{props.prizeCategory}</h1>
+				<h2 className="font-sans font-bold font-white text-2xl">{props.title}</h2>
+				<hr />
+				<p className="font-sans font-white text-lg">{props.authors.join(", ")}</p>
+				<hr />
+				<p className="mt-2">{props.description}</p>
+			</div>
+		</div>
+	);
+}