From e2d19a281a7649597b6940cfd1f60c3d213ba3d0 Mon Sep 17 00:00:00 2001
From: j285he <j285he@localhost>
Date: Fri, 9 Sep 2022 17:01:34 -0400
Subject: [PATCH] Add Textbox Component (#45)

Closes #39.

Padding will look correct when !46 is merged in.

https://j285he-textbox-component-csc-class-profile-staging-snedadah.k8s.csclub.cloud
Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/45
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
Reviewed-by: Shahan Neda <snedadah@csclub.uwaterloo.ca>
---
 components/CenterWrapper.module.css |  7 +++++++
 components/CenterWrapper.tsx        | 11 ++++++++++
 pages/playground.tsx                | 32 +++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 components/CenterWrapper.module.css
 create mode 100644 components/CenterWrapper.tsx

diff --git a/components/CenterWrapper.module.css b/components/CenterWrapper.module.css
new file mode 100644
index 0000000..6370ab3
--- /dev/null
+++ b/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;
+}
diff --git a/components/CenterWrapper.tsx b/components/CenterWrapper.tsx
new file mode 100644
index 0000000..377bb14
--- /dev/null
+++ b/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>;
+}
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 426da06..d7320bb 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -13,6 +13,7 @@ import React from "react";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 
+import { CenterWrapper } from "../components/CenterWrapper";
 import { ColorPalette } from "../components/ColorPalette";
 import { WordCloud } from "../components/WordCloud";
 
@@ -73,6 +74,37 @@ export default function Home() {
           value: word.value,
         }))}
       />
+      <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>