From a5b470bb787554b68bb031a7bb00ac80ae209753 Mon Sep 17 00:00:00 2001
From: shahanneda <shahan.neda@gmail.com>
Date: Mon, 8 Aug 2022 20:15:38 -0700
Subject: [PATCH] Created componet wrapper

---
 .vscode/settings.json                      |  3 +-
 components/SideComponentWrapper.module.css | 32 +++++++++++++++
 components/SideComponentWrapper.tsx        | 27 +++++++++++++
 pages/_app.css                             | 10 ++++-
 pages/playground.tsx                       | 32 +++++++++++++++
 pages/samplePage.module.css                |  4 ++
 pages/samplePage.tsx                       | 45 ++++++++++++++++++++++
 7 files changed, 151 insertions(+), 2 deletions(-)
 create mode 100644 components/SideComponentWrapper.module.css
 create mode 100644 components/SideComponentWrapper.tsx
 create mode 100644 pages/samplePage.module.css
 create mode 100644 pages/samplePage.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 99e58e0..eb98407 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,12 +2,13 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "eslint.format.enable": true,
   "eslint.codeActionsOnSave.mode": "all",
+  "css.lint.validProperties": ["composes"],
   "css.format.spaceAroundSelectorSeparator": true,
   "[css]": {
     "editor.suggest.insertMode": "replace",
     "gitlens.codeLens.scopes": ["document"],
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "vscode.css-language-features"
+    "editor.defaultFormatter": "vscode.css-language-features",
   },
   "[javascript]": {
     "editor.formatOnSave": false,
diff --git a/components/SideComponentWrapper.module.css b/components/SideComponentWrapper.module.css
new file mode 100644
index 0000000..81ceba5
--- /dev/null
+++ b/components/SideComponentWrapper.module.css
@@ -0,0 +1,32 @@
+.wrapperCommon {
+  background-color: var(--secondary-background);
+  display: flex;
+  width: 80%;
+  padding: calc(40rem / 16) calc(50rem / 16);
+  margin: calc(80rem / 16) 0;
+}
+
+.wrapperRight {
+  composes: wrapperCommon;
+  align-self: end;
+  margin-right: 0;
+  padding-right: 0;
+  border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
+}
+
+.wrapperLeft {
+  composes: wrapperCommon;
+  align-self: start;
+  margin-left: 0;
+  padding-left: 0;
+  border-radius: 0 12.5rem 12.5rem 0;
+}
+
+.graphWrapper {
+  margin: calc(20rem / 16);
+}
+
+
+.textWrapper {
+  margin: 0 calc(100rem / 16);
+}
\ No newline at end of file
diff --git a/components/SideComponentWrapper.tsx b/components/SideComponentWrapper.tsx
new file mode 100644
index 0000000..6f1cdc8
--- /dev/null
+++ b/components/SideComponentWrapper.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+import styles from "./SideComponentWrapper.module.css";
+
+type ComponentWrapperProps = {
+  children: React.ReactNode;
+  heading: string;
+  body: string;
+  rightAligned?: boolean;
+};
+
+export default function SideComponentWrapper({
+  heading,
+  body,
+  children,
+  rightAligned = false,
+}: ComponentWrapperProps) {
+  return (
+    <div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
+      <div className={styles.graphWrapper}>{children}</div>
+      <div className={styles.textWrapper}>
+        <h3 className={styles.heading}>{heading}</h3>
+        <p className={styles.body}>{body}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/_app.css b/pages/_app.css
index 0c34108..30aea2c 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -73,7 +73,11 @@ h2 {
   color: var(--primary-heading);
 }
 
-h3,
+h3 {
+  color: var(--secondary-heading);
+  font-size: calc(45rem / 16);
+}
+
 h4,
 h5,
 h6 {
@@ -89,6 +93,10 @@ a:hover {
   color: var(--link-hover);
 }
 
+p {
+  font-size: calc(28rem / 16);
+}
+
 @media only screen and (prefers-color-scheme: dark) {
   body {
     --primary-background: var(--dark--primary-background);
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 58e19ae..9da4fc0 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -5,6 +5,8 @@ import React from "react";
 
 import Sections from "@/components/Sections";
 
+import SideComponentWrapper from "@/components/SideComponentWrapper";
+
 import { ColorPalette } from "../components/ColorPalette";
 import { WordCloud } from "../components/WordCloud";
 
@@ -67,6 +69,36 @@ export default function Home() {
         <code>{"<Sections />"}</code>
         <Sections data={sectionsData} />
       </h2>
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+      >
+        <BarGraphVertical
+          data={mockCategoricalData}
+          width={800}
+          height={500}
+          margin={{
+            top: 20,
+            bottom: 80,
+            left: 60,
+            right: 20,
+          }}
+        />
+      </SideComponentWrapper>
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        rightAligned
+      >
+        <WordCloud
+          data={moreMockCategoricalData.map((word) => ({
+            text: word.key,
+            value: word.value,
+          }))}
+        />
+      </SideComponentWrapper>
     </div>
   );
 }
diff --git a/pages/samplePage.module.css b/pages/samplePage.module.css
new file mode 100644
index 0000000..cefb95d
--- /dev/null
+++ b/pages/samplePage.module.css
@@ -0,0 +1,4 @@
+.page {
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/pages/samplePage.tsx b/pages/samplePage.tsx
new file mode 100644
index 0000000..fb03707
--- /dev/null
+++ b/pages/samplePage.tsx
@@ -0,0 +1,45 @@
+import { BarGraphVertical } from "components/BarGraph";
+import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
+import React from "react";
+
+import SideComponentWrapper from "@/components/SideComponentWrapper";
+
+import { WordCloud } from "../components/WordCloud";
+
+import styles from "./samplePage.module.css";
+
+export default function SamplePage() {
+  return (
+    <div className={styles.page}>
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+      >
+        <BarGraphVertical
+          data={mockCategoricalData}
+          width={800}
+          height={500}
+          margin={{
+            top: 20,
+            bottom: 80,
+            left: 60,
+            right: 20,
+          }}
+        />
+      </SideComponentWrapper>
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        rightAligned
+      >
+        <WordCloud
+          data={moreMockCategoricalData.map((word) => ({
+            text: word.key,
+            value: word.value,
+          }))}
+        />
+      </SideComponentWrapper>
+    </div>
+  );
+}