Merged center and side wrappers

components/CenterComponentWrapper.module.css

@@ -1,19 +0,0 @@
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  margin: calc(40rem / 16) auto;
-  padding: 0 15%;
-}
-
-.graphWrapper {
-  margin-top: calc(50rem / 16);
-}
-
-@media screen and (max-width: 768px) {
-  .wrapper {
-    padding: 0 calc(20rem / 16);
-  }
-}

components/CenterComponentWrapper.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-import styles from "./CenterComponentWrapper.module.css";
-
-type FullComponentWrapperProps = {
-  children: React.ReactNode;
-  heading: string;
-  body: string;
-};
-
-export function CenterComponentWrapper({
-  heading,
-  body,
-  children,
-}: FullComponentWrapperProps) {
-  return (
-    <section className={styles.wrapper}>
-      <div>
-        <h3>{heading}</h3>
-        <p>{body}</p>
-      </div>
-      <div className={styles.graphWrapper}>{children}</div>
-    </section>
-  );
-}

components/ComponentWrapper.module.css

@@ -2,7 +2,7 @@
   background-color: var(--secondary-background);
   display: flex;
   padding: calc(40rem / 16) calc(50rem / 16);
-  margin: calc(40rem / 16) 0;
+  margin: calc(65rem / 16) 0;
   width: 90%;
 }
 
@@ -28,6 +28,19 @@
 
 .noBackground {
   background: none;
+  align-self: center;
+}
+
+.wrapperCenter {
+  flex-direction: column;
+  text-align: center;
+  gap: calc(25rem / 16);
+  margin: 0 0 calc(65rem / 16) 0;
+  padding: 0 15%;
+}
+
+.wrapperCenter > h3 {
+  margin: 0;
 }
 
 @media screen and (max-width: 768px) {

components/ComponentWrapper.tsx

@@ -1,27 +1,37 @@
 import React from "react";
 
-import styles from "./SideComponentWrapper.module.css";
+import styles from "./ComponentWrapper.module.css";
+
+type AlignOption = "left" | "center" | "right";
 
 type ComponentWrapperProps = {
   children: React.ReactNode;
   heading: string;
   body: string;
-  align?: "left" | "right";
+  align?: AlignOption;
   noBackground?: boolean;
+  center?: boolean;
 };
 
-export function SideComponentWrapper({
+export function ComponentWrapper({
   heading,
   body,
   children,
   align = "left",
   noBackground = false,
 }: ComponentWrapperProps) {
+  const alignClasses: { [key in AlignOption]: string } = {
+    left: styles.wrapperLeft,
+    center: styles.wrapperCenter,
+    right: styles.wrapperRight,
+  };
+
   return (
     <div
-      className={`${
-        align === "right" ? styles.wrapperRight : styles.wrapperLeft
-      } ${noBackground ? styles.noBackground : ""}`}
+      className={`
+      ${alignClasses[align]} 
+      ${noBackground ? styles.noBackground : ""}
+      `}
     >
       <div className={styles.internalWrapper}>
         <h3>{heading}</h3>

pages/samplePage.tsx

@@ -4,8 +4,7 @@ import React from "react";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
 
-import { CenterComponentWrapper } from "@/components/CenterComponentWrapper";
-import { SideComponentWrapper } from "@/components/SideComponentWrapper";
+import { ComponentWrapper } from "@/components/ComponentWrapper";
 
 import { WordCloud } from "../components/WordCloud";
 
@@ -17,7 +16,7 @@ export default function SamplePage() {
 
   return (
     <div className={styles.page}>
-      <SideComponentWrapper
+      <ComponentWrapper
         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."
       >
@@ -33,11 +32,12 @@ export default function SamplePage() {
             right: 20,
           }}
         />
-      </SideComponentWrapper>
+      </ComponentWrapper>
 
-      <CenterComponentWrapper
+      <ComponentWrapper
         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."
+        align="center"
       >
         <WordCloud
           data={moreMockCategoricalData.map((word) => ({
@@ -45,12 +45,12 @@ export default function SamplePage() {
             value: word.value,
           }))}
           // For components that we don't want to match the width necessarily we can provide direct values
-          width={isMobile ? width / 1.25 : 1000}
+          width={isMobile ? width / 1.5 : 800}
           height={500}
         />
-      </CenterComponentWrapper>
+      </ComponentWrapper>
 
-      <SideComponentWrapper
+      <ComponentWrapper
         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."
         align="right"
@@ -67,11 +67,12 @@ export default function SamplePage() {
             right: 20,
           }}
         />
-      </SideComponentWrapper>
+      </ComponentWrapper>
 
-      <SideComponentWrapper
+      <ComponentWrapper
         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."
+        align="left"
         noBackground
       >
         <BarGraphHorizontal
@@ -86,9 +87,9 @@ export default function SamplePage() {
             right: 20,
           }}
         />
-      </SideComponentWrapper>
+      </ComponentWrapper>
 
-      <SideComponentWrapper
+      <ComponentWrapper
         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."
       >
@@ -104,11 +105,12 @@ export default function SamplePage() {
             right: 20,
           }}
         />
-      </SideComponentWrapper>
+      </ComponentWrapper>
 
-      <SideComponentWrapper
+      <ComponentWrapper
         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."
+        align="left"
         noBackground
       >
         <WordCloud
@@ -119,7 +121,7 @@ export default function SamplePage() {
           width={isMobile ? width / 1.5 : width / 2}
           height={500}
         />
-      </SideComponentWrapper>
+      </ComponentWrapper>
     </div>
   );
 }