diff --git a/components/CenterComponentWrapper.module.css b/components/CenterComponentWrapper.module.css
deleted file mode 100644
index 50f0e23..0000000
--- a/components/CenterComponentWrapper.module.css
+++ /dev/null
@@ -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);
- }
-}
\ No newline at end of file
diff --git a/components/CenterComponentWrapper.tsx b/components/CenterComponentWrapper.tsx
deleted file mode 100644
index 1dfe7fa..0000000
--- a/components/CenterComponentWrapper.tsx
+++ /dev/null
@@ -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 (
-
- );
-}
diff --git a/components/SideComponentWrapper.module.css b/components/ComponentWrapper.module.css
similarity index 78%
rename from components/SideComponentWrapper.module.css
rename to components/ComponentWrapper.module.css
index 80ca06e..3d5d9b4 100644
--- a/components/SideComponentWrapper.module.css
+++ b/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) {
diff --git a/components/SideComponentWrapper.tsx b/components/ComponentWrapper.tsx
similarity index 51%
rename from components/SideComponentWrapper.tsx
rename to components/ComponentWrapper.tsx
index 69bc4a0..a67cf72 100644
--- a/components/SideComponentWrapper.tsx
+++ b/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 (
{heading}
diff --git a/pages/samplePage.tsx b/pages/samplePage.tsx
index 72306d1..2cf944a 100644
--- a/pages/samplePage.tsx
+++ b/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 (
-
@@ -33,11 +32,12 @@ export default function SamplePage() {
right: 20,
}}
/>
-
+
-
({
@@ -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}
/>
-
+
-
-
+
-
-
+
-
@@ -104,11 +105,12 @@ export default function SamplePage() {
right: 20,
}}
/>
-
+
-
-
+
);
}