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 ( +
+
+

{heading}

+

{body}

+
+
{children}
+
+ ); +} 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}

{heading}

{body}

+
{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;