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/ComponentWrapper.module.css b/components/ComponentWrapper.module.css
new file mode 100644
index 0000000..4fad333
--- /dev/null
+++ b/components/ComponentWrapper.module.css
@@ -0,0 +1,59 @@
+.sideWrapperCommon {
+ background-color: var(--secondary-background);
+ display: flex;
+ padding: calc(40rem / 16) calc(50rem / 16);
+ margin: calc(65rem / 16) 0;
+ width: 90%;
+}
+
+.wrapperRight {
+ composes: sideWrapperCommon;
+ align-self: end;
+ margin-right: 0;
+ padding-right: 0;
+ border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
+ flex-direction: row-reverse;
+ padding-right: calc(50rem / 16);
+}
+
+.wrapperLeft {
+ composes: sideWrapperCommon;
+ align-self: start;
+ margin-left: 0;
+ padding-left: 0;
+ border-radius: 0 calc(200rem / 16) calc(200rem / 16) 0;
+ flex-direction: row;
+ padding-left: calc(50rem / 16);
+}
+
+.noBackground {
+ background: none;
+ align-self: center;
+}
+
+.wrapperCenter {
+ flex-direction: column;
+ text-align: center;
+ gap: calc(25rem / 16);
+ /* to match the 65px margin with the left/right variant:
+ add 45px bottom margin, since internal wrapper contributes 20px for the center component
+ 0px top margin, since h3 contributes 45px and internal wrapper contributes 20px for the center component
+ */
+ margin: 0 0 calc(45rem / 16) 0;
+ padding: 0 15%;
+}
+
+@media screen and (max-width: 768px) {
+ .sideWrapperCommon {
+ margin: auto;
+ flex-direction: column;
+ text-align: center;
+ padding: 0;
+ border-radius: 0;
+ width: 100%;
+ }
+}
+
+.internalWrapper {
+ padding: calc(20rem / 16);
+}
\ No newline at end of file
diff --git a/components/ComponentWrapper.tsx b/components/ComponentWrapper.tsx
new file mode 100644
index 0000000..8893905
--- /dev/null
+++ b/components/ComponentWrapper.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import styles from "./ComponentWrapper.module.css";
+
+type AlignOption = "left" | "center" | "right";
+
+type ComponentWrapperProps = {
+ children: React.ReactNode;
+ heading: string;
+ bodyText: string;
+ align?: AlignOption;
+ noBackground?: boolean;
+};
+
+export function ComponentWrapper({
+ heading,
+ bodyText,
+ children,
+ align = "left",
+ noBackground = false,
+}: ComponentWrapperProps) {
+ const alignClasses: { [key in AlignOption]: string } = {
+ left: styles.wrapperLeft,
+ center: styles.wrapperCenter,
+ right: styles.wrapperRight,
+ };
+
+ return (
+
+
+
{heading}
+
{bodyText}
+
+
{children}
+
Click here to visit the playground
+
+ Click here to visit a sample page
);
}
diff --git a/pages/samplePage.module.css b/pages/samplePage.module.css
new file mode 100644
index 0000000..b50d07b
--- /dev/null
+++ b/pages/samplePage.module.css
@@ -0,0 +1,5 @@
+.page {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
\ No newline at end of file
diff --git a/pages/samplePage.tsx b/pages/samplePage.tsx
new file mode 100644
index 0000000..f067888
--- /dev/null
+++ b/pages/samplePage.tsx
@@ -0,0 +1,127 @@
+import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
+import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
+import React from "react";
+import { useWindowDimensions } from "utils/getWindowDimensions";
+import { useIsMobile } from "utils/isMobile";
+
+import { ComponentWrapper } from "@/components/ComponentWrapper";
+
+import { WordCloud } from "../components/WordCloud";
+
+import styles from "./samplePage.module.css";
+
+export default function SamplePage() {
+ const { width } = useWindowDimensions();
+ const isMobile = useIsMobile();
+
+ return (
+
+
+
+
+
+
+ ({
+ text: word.key,
+ value: word.value,
+ }))}
+ // For components that we don't want to match the width necessarily we can provide direct values
+ width={isMobile ? width / 1.5 : 800}
+ height={500}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ({
+ text: word.key,
+ value: word.value,
+ }))}
+ width={isMobile ? width / 1.5 : width / 2}
+ height={500}
+ />
+
+
+ );
+}
diff --git a/utils/getWindowDimensions.ts b/utils/getWindowDimensions.ts
new file mode 100644
index 0000000..427568b
--- /dev/null
+++ b/utils/getWindowDimensions.ts
@@ -0,0 +1,35 @@
+// Attribution: https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+import { useState, useEffect } from "react";
+
+type WindowDimensions = {
+ width: number;
+ height: number;
+};
+
+const getWindowDimensions = (): WindowDimensions => {
+ const { innerWidth, innerHeight } = window;
+
+ return {
+ width: innerWidth,
+ height: innerHeight,
+ };
+};
+
+export const useWindowDimensions = (): WindowDimensions => {
+ const [windowDimensions, setWindowDimensions] = useState({
+ width: 0,
+ height: 0,
+ });
+
+ const handleResize = () => {
+ setWindowDimensions(getWindowDimensions());
+ };
+
+ useEffect(() => {
+ handleResize();
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
+ return windowDimensions;
+};
diff --git a/utils/isMobile.ts b/utils/isMobile.ts
new file mode 100644
index 0000000..4022df1
--- /dev/null
+++ b/utils/isMobile.ts
@@ -0,0 +1,3 @@
+import { useWindowDimensions } from "./getWindowDimensions";
+
+export const useIsMobile = () => useWindowDimensions().width <= 768;