From 3715e3138b2f1f493b20673f2c37e3ed3959a3f0 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 31 Aug 2022 23:05:38 -0400
Subject: [PATCH 1/2] Add Textbox

---
 components/Textbox.module.css |  6 ++++++
 components/Textbox.tsx        | 11 +++++++++++
 pages/playground.tsx          | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 components/Textbox.module.css
 create mode 100644 components/Textbox.tsx

diff --git a/components/Textbox.module.css b/components/Textbox.module.css
new file mode 100644
index 0000000..44a36f2
--- /dev/null
+++ b/components/Textbox.module.css
@@ -0,0 +1,6 @@
+.textbox {
+  width: 80%;
+  padding: calc(80rem / 16);
+  background-color: var(--secondary-background);
+  border-radius: calc(20rem / 16);
+}
diff --git a/components/Textbox.tsx b/components/Textbox.tsx
new file mode 100644
index 0000000..c34d532
--- /dev/null
+++ b/components/Textbox.tsx
@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+import styles from "./Textbox.module.css";
+
+export interface TextboxProps {
+  children: ReactNode;
+}
+
+export default function Textbox({ children }: TextboxProps) {
+  return <section className={styles.textbox}>{children}</section>;
+}
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 5707edb..9575f30 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -3,6 +3,7 @@ import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import React from "react";
 
 import { ColorPalette } from "../components/ColorPalette";
+import Textbox from "../components/Textbox";
 import { WordCloud } from "../components/WordCloud";
 
 import styles from "./playground.module.css";
@@ -59,6 +60,37 @@ export default function Home() {
           value: word.value,
         }))}
       />
+      <h2>
+        <code>{"<Textbox />"}</code>
+      </h2>
+      <Textbox>
+        <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>
+      </Textbox>
     </div>
   );
 }
-- 
2.39.2


From 573acc858ed16ef3f8148c945ec7ad85aa25ef6b Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 31 Aug 2022 23:08:14 -0400
Subject: [PATCH 2/2] Center

---
 components/Textbox.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Textbox.module.css b/components/Textbox.module.css
index 44a36f2..6370ab3 100644
--- a/components/Textbox.module.css
+++ b/components/Textbox.module.css
@@ -3,4 +3,5 @@
   padding: calc(80rem / 16);
   background-color: var(--secondary-background);
   border-radius: calc(20rem / 16);
+  margin: 0 auto;
 }
-- 
2.39.2