Merge main

components/CenterWrapper.module.css

@@ -0,0 +1,7 @@
+.textbox {
+  width: 80%;
+  padding: calc(80rem / 16);
+  background-color: var(--secondary-background);
+  border-radius: calc(20rem / 16);
+  margin: 0 auto;
+}

components/CenterWrapper.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+import styles from "./CenterWrapper.module.css";
+
+export interface TextboxProps {
+  children: ReactNode;
+}
+
+export function CenterWrapper({ children }: TextboxProps) {
+  return <section className={styles.textbox}>{children}</section>;
+}

data/mocks.ts

@@ -80,7 +80,6 @@ export const moreMockCategoricalData = [
   { key: "Dart", value: 2.21 },
 ];
 
-<<<<<<< HEAD
 export const mockTimelineData = [
   {
     time: "Fall 2020",
@@ -107,7 +106,7 @@ export const mockTimelineData = [
     text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut en",
   },
 ];
-=======
+
 export const mockBoxPlotData = [
   {
     category: "1A",
@@ -149,4 +148,3 @@ export const mockQuoteDataLong = [
   "Hello, world!",
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in enim neque. Sed sit amet convallis tellus. Integer condimentum a felis id gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam metus libero, sagittis in consectetur in, scelerisque sed sapien. Nullam ut feugiat sapien. Praesent dictum ac ipsum ac lacinia.",
 ];
->>>>>>> main

pages/playground.tsx

@@ -7,7 +7,7 @@ import {
   mockQuoteData,
   mockQuoteDataLong,
   mockPieData,
-  mockTimelineData
+  mockTimelineData,
 } from "data/mocks";
 import React from "react";
 
@@ -15,6 +15,7 @@ import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { Timeline } from "@/components/Timeline";
 
+import { CenterWrapper } from "../components/CenterWrapper";
 import { ColorPalette } from "../components/ColorPalette";
 import { WordCloud } from "../components/WordCloud";
 
@@ -25,13 +26,15 @@ export default function Home() {
     <div className={styles.page}>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
+      <ColorPalette />
+
       <h2>
         <code>{"<PieChart />"}</code>
       </h2>
       <div style={{ padding: "30px" }}>
         <PieChart data={mockPieData} width={800} labelWidth={215} />
       </div>
-      <ColorPalette />
+
       <h2>
         <code>{"<BarGraphHorizontal />"}</code>
       </h2>
@@ -47,6 +50,7 @@ export default function Home() {
           right: 20,
         }}
       />
+
       <h2>
         <code>{"<BarGraphVertical />"}</code>
       </h2>
@@ -66,6 +70,7 @@ export default function Home() {
           right: 20,
         }}
       />
+
       <h2>
         <code>{"<WordCloud />"}</code>
       </h2>
@@ -75,11 +80,44 @@ export default function Home() {
           value: word.value,
         }))}
       />
+
       <h2>
         <code>{"<Timeline />"}</code>
       </h2>
       <Timeline data={mockTimelineData} />
 
+      <h2>
+        <code>{"<Textbox />"}</code>
+      </h2>
+      <CenterWrapper>
+        <h1>Preface</h1>
+        <p>
+          The CS Class Profile consists of data relevant to CS, CFM, and CS/BBA
+          students. These were combined with the knowledge that students in
+          these programs tend to have similar experiences, as many of the same
+          CS required courses are shared. In the standard co-op offering, CS and
+          CFM take 4 years and 2 semesters to complete, while CS/BBA can take up
+          to a full 5 years.
+        </p>
+        <p>
+          Computer Science (and the others) is known to be a very prestigious
+          program, and is very well known in Canada as well as across the world.
+          For prospective students or anyone who is interested in learning more
+          about what the students are like, this CS Class Profile will attempt
+          to answer some of your questions, and you may even learn a thing or
+          two you didn’t expect!
+        </p>
+        <p>
+          The survey questions were approved by the Institutional Analysis &
+          Planning, where all University of Waterloo stakeholders that are
+          interested in conducting a non-academic research survey involving a
+          large portion of the UWaterloo population are reviewed and approved.
+          The entirety of the survey creation and data processing was done by
+          the UW Computer Science Club, so please check us out if you enjoy what
+          you see!
+        </p>
+      </CenterWrapper>
+
       <h2>
         <code>{"<BoxPlot />"}</code>
       </h2>