Set up sample clipboard (#95)

* feat: Schedule Page component structure

feat: component organiztion on schedule page

* feature: create clipboard schedule

* feat: draft clipboard

* fix: build error

* fix: heading sizes and h1 title

* fix: Bootstrap vars, set up Accordion item map

* fix: remove unused files

* fix: responsive margins, accessibility

* fix: simplify accordion header layout

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>
Co-authored-by: Albert Wang <alberw5@uci.edu>

apps/site/src/lib/styles/_zothacks-theme.scss

@@ -16,3 +16,4 @@ $light-blue: #81deeb;
 $blue: #3902fd;
 $purple: #6600b6;
 $navbar-red: #ff0000;
+$brown: #aa703c;

apps/site/src/lib/styles/globals.scss

@@ -1,4 +1,23 @@
+@use "bootstrap-utils" as bootstrap;
+
+$container-padding: 8rem;
+
 .background {
 	background-image: url("~@/assets/background/anteater-head-tiling.gif");
 	background-size: 464px; // half size for 2x scaling
 }
+
+.accordion {
+	--bs-accordion-active-color: theme.$black;
+	--bs-accordion-bg: transparent;
+	--bs-accordion-active-bg: transparent;
+	--bs-accordion-border-color: transparent;
+	--bs-accordion-border-radius: 0;
+	--bs-accordion-btn-icon-width: 14px;
+}
+
+section.container {
+	// responsive padding
+	@include bootstrap.padding-top($container-padding);
+	@include bootstrap.padding-bottom($container-padding);
+}

apps/site/src/views/Home/sections/FAQ/FAQ.module.scss

@@ -38,14 +38,7 @@
 }
 
 .accordion {
-	--bs-accordion-active-color: theme.$black;
-	--bs-accordion-bg: transparent;
-	--bs-accordion-active-bg: transparent;
-	--bs-accordion-border-color: transparent;
-	--bs-accordion-btn-focus-box-shadow: 0;
-	--bs-accordion-border-radius: 0;
 	--bs-accordion-btn-icon-width: 14px;
-
 	--bs-accordion-btn-icon: url("~@/assets/icons/plus-lg.svg");
 	--bs-accordion-btn-active-icon: url("~@/assets/icons/dash-lg.svg");
 }

apps/site/src/views/Schedule/Schedule.module.scss

@@ -0,0 +1,21 @@
+@use "bootstrap-utils" as bootstrap;
+
+$container-padding: 8rem;
+
+.schedule {
+	h1 {
+		text-align: center;
+
+		@include bootstrap.rfs(8rem, margin-bottom);
+	}
+
+	margin: 10rem 1rem;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		margin: 10rem 7rem;
+	}
+
+	h2 {
+		text-align: center;
+	}
+}

apps/site/src/views/Schedule/Schedule.tsx

@@ -1,5 +1,22 @@
-import "./Schedule.module.scss";
+import ClipboardSchedule from "./sections/ClipboardSchedule/ClipboardSchedule";
+import styles from "./Schedule.module.scss";
 
 export default function Schedule() {
-	return <h1>Schedule</h1>;
+	return (
+		<div className={styles.schedule}>
+			<h1>Schedule</h1>
+			<ClipboardSchedule
+				schedule={[
+					{
+						_key: "test",
+						title: "test",
+						description: "test",
+						location: "test",
+						startDate: new Date(),
+						endDate: new Date(),
+					},
+				]}
+			/>
+		</div>
+	);
 }

apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.module.scss

@@ -0,0 +1,36 @@
+@use "bootstrap-utils" as bootstrap;
+@use "zothacks-theme" as theme;
+
+.accordion {
+	--bs-accordion-btn-icon: url("~@/assets/icons/accordion-btn.svg");
+	--bs-accordion-btn-active-icon: url("~@/assets/icons/accordion-btn.svg");
+	--bs-accordion-btn-icon-width: 25px;
+
+	button::after {
+		margin-left: 1rem;
+	}
+}
+
+.clip {
+	position: absolute;
+	width: 75%;
+	top: 0;
+	left: 50%;
+	transform: translate(-50%, -55%);
+
+	@include bootstrap.media-breakpoint-up(lg) {
+		width: 60%;
+	}
+}
+
+.clipboard {
+	@include bootstrap.rfs(7.5rem, border-radius);
+
+	background-color: white;
+	border: 1.25rem solid theme.$brown;
+}
+
+.accordionItem {
+	border-top: 2px solid theme.$light-blue;
+	border-bottom: 2px solid theme.$light-blue;
+}

apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import Image from "next/image";
+
+import Accordion from "react-bootstrap/Accordion";
+import Container from "react-bootstrap/Container";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+
+import clip from "@/assets/images/clip.svg";
+
+import styles from "./ClipboardSchedule.module.scss";
+
+interface ClipboardScheduleProps {
+	schedule: {
+		_key: string;
+		title: string;
+		description: string;
+		location: string;
+		startDate: Date;
+		endDate: Date;
+	}[];
+}
+
+function ClipboardSchedule({ schedule }: ClipboardScheduleProps) {
+	return (
+		<Container
+			as="section"
+			className={styles.clipboard + " px-0 position-relative"}
+		>
+			<div className={styles.clip}>
+				<Image src={clip} alt="Clipboard clip" className={styles.clip} />
+			</div>
+			<h2 className="mb-5">Countdown Timer</h2>
+			<Accordion defaultActiveKey="0" className={styles.accordion}>
+				{schedule.map(
+					(
+						{ _key, title, description, location, startDate, endDate },
+						index,
+					) => (
+						<Accordion.Item
+							key={_key}
+							eventKey={`${index}`}
+							className={styles.accordionItem}
+						>
+							<Accordion.Header className={styles.accordionHeader}>
+								<h3>{title}</h3>
+								<span className="text-end ms-auto">
+									{location}, {startDate.toString()} - {endDate.toString()}
+								</span>
+							</Accordion.Header>
+							<Accordion.Body>{description}</Accordion.Body>
+						</Accordion.Item>
+					),
+				)}
+			</Accordion>
+		</Container>
+	);
+}
+
+export default ClipboardSchedule;