diff --git a/components/FullComponentWrapper.module.css b/components/FullComponentWrapper.module.css
new file mode 100644
index 0000000..e6d8fb7
--- /dev/null
+++ b/components/FullComponentWrapper.module.css
@@ -0,0 +1,21 @@
+.wrapper {
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ width: 80%;
+ align-self: center;
+ margin: calc(40rem / 16) 0;
+}
+
+
+
+.graphWrapper {
+ margin-top: calc(80rem / 16);
+}
+
+
+/* .textWrapper {
+ margin: 0 calc(100rem / 16);
+} */
\ No newline at end of file
diff --git a/components/FullComponentWrapper.tsx b/components/FullComponentWrapper.tsx
new file mode 100644
index 0000000..2627d67
--- /dev/null
+++ b/components/FullComponentWrapper.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import styles from "./FullComponentWrapper.module.css";
+
+type FullComponentWrapperProps = {
+ children: React.ReactNode;
+ heading: string;
+ body: string;
+};
+
+export default function FullComponentWrapper({
+ heading,
+ body,
+ children,
+}: FullComponentWrapperProps) {
+ return (
+
+ );
+}
diff --git a/components/SideComponentWrapper.module.css b/components/SideComponentWrapper.module.css
index 81ceba5..990a989 100644
--- a/components/SideComponentWrapper.module.css
+++ b/components/SideComponentWrapper.module.css
@@ -1,9 +1,9 @@
.wrapperCommon {
background-color: var(--secondary-background);
display: flex;
- width: 80%;
+ width: 95%;
padding: calc(40rem / 16) calc(50rem / 16);
- margin: calc(80rem / 16) 0;
+ margin: calc(40rem / 16) 0;
}
.wrapperRight {
@@ -22,6 +22,12 @@
border-radius: 0 12.5rem 12.5rem 0;
}
+@media screen and (max-width: 768px) {
+ .wrapperCommon {
+ flex-direction: column;
+ }
+}
+
.graphWrapper {
margin: calc(20rem / 16);
}
diff --git a/components/SideComponentWrapper.tsx b/components/SideComponentWrapper.tsx
index 6f1cdc8..d85a688 100644
--- a/components/SideComponentWrapper.tsx
+++ b/components/SideComponentWrapper.tsx
@@ -17,11 +17,11 @@ export default function SideComponentWrapper({
}: ComponentWrapperProps) {
return (
-
{children}
+
{children}
);
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7803bd0..59c5229 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,9 +1,20 @@
import type { AppProps } from "next/app";
+import Head from "next/head";
import React from "react";
import "./_app.css";
import "./font.css";
export default function App({ Component, pageProps }: AppProps): JSX.Element {
- return ;
+ return (
+ <>
+
+
+
+ ;
+ >
+ );
}
diff --git a/pages/index.tsx b/pages/index.tsx
index 4ff1fb7..024923f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,6 +5,8 @@ export default function Home() {
return (
Click here to visit the playground
+
+ Click here to visit a sample page
);
}
diff --git a/pages/playground.tsx b/pages/playground.tsx
index f8065ae..f0d6027 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -62,35 +62,6 @@ export default function Home() {
}))}
/>
-
-
-
-
-
- ({
- text: word.key,
- value: word.value,
- }))}
- />
-
);
}
diff --git a/pages/samplePage.tsx b/pages/samplePage.tsx
index fb03707..368fc7a 100644
--- a/pages/samplePage.tsx
+++ b/pages/samplePage.tsx
@@ -1,7 +1,9 @@
-import { BarGraphVertical } from "components/BarGraph";
+import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import React from "react";
+import useWindowDimensions from "utils/getWindowDimensions";
+import FullComponentWrapper from "@/components/FullComponentWrapper";
import SideComponentWrapper from "@/components/SideComponentWrapper";
import { WordCloud } from "../components/WordCloud";
@@ -9,6 +11,8 @@ import { WordCloud } from "../components/WordCloud";
import styles from "./samplePage.module.css";
export default function SamplePage() {
+ const { height, width } = useWindowDimensions();
+
return (
-
({
text: word.key,
value: word.value,
}))}
+ width={1000}
+ height={500}
+ />
+
+
+
+
diff --git a/utils/getWindowDimensions.ts b/utils/getWindowDimensions.ts
new file mode 100644
index 0000000..b54167b
--- /dev/null
+++ b/utils/getWindowDimensions.ts
@@ -0,0 +1,37 @@
+// 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,
+ };
+};
+
+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;
+};
+
+export default useWindowDimensions;