Created componet wrapper
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Shahan Nedadahandeh 2022-08-08 20:15:38 -07:00
parent b586d52f72
commit ac446f7b07
Signed by: snedadah
GPG Key ID: 8638C7F917385B01
7 changed files with 151 additions and 2 deletions

View File

@ -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,

View File

@ -0,0 +1,32 @@
.wrapperCommon {
background-color: var(--secondary-background);
display: flex;
width: 80%;
padding: calc(40rem / 16) calc(50rem / 16);
margin: calc(80rem / 16) 0;
}
.wrapperRight {
composes: wrapperCommon;
align-self: end;
margin-right: 0;
padding-right: 0;
border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
}
.wrapperLeft {
composes: wrapperCommon;
align-self: start;
margin-left: 0;
padding-left: 0;
border-radius: 0 12.5rem 12.5rem 0;
}
.graphWrapper {
margin: calc(20rem / 16);
}
.textWrapper {
margin: 0 calc(100rem / 16);
}

View File

@ -0,0 +1,27 @@
import React from "react";
import styles from "./SideComponentWrapper.module.css";
type ComponentWrapperProps = {
children: React.ReactNode;
heading: string;
body: string;
rightAligned?: boolean;
};
export default function SideComponentWrapper({
heading,
body,
children,
rightAligned = false,
}: ComponentWrapperProps) {
return (
<div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
<div className={styles.graphWrapper}>{children}</div>
<div className={styles.textWrapper}>
<h3 className={styles.heading}>{heading}</h3>
<p className={styles.body}>{body}</p>
</div>
</div>
);
}

View File

@ -73,7 +73,11 @@ h2 {
color: var(--primary-heading);
}
h3,
h3 {
color: var(--secondary-heading);
font-size: calc(45rem / 16);
}
h4,
h5,
h6 {
@ -89,6 +93,10 @@ a:hover {
color: var(--link-hover);
}
p {
font-size: calc(28rem / 16);
}
@media only screen and (prefers-color-scheme: dark) {
body {
--primary-background: var(--dark--primary-background);

View File

@ -2,6 +2,8 @@ import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import React from "react";
import SideComponentWrapper from "@/components/SideComponentWrapper";
import { ColorPalette } from "../components/ColorPalette";
import { WordCloud } from "../components/WordCloud";
@ -59,6 +61,36 @@ export default function Home() {
value: word.value,
}))}
/>
<SideComponentWrapper
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."
>
<BarGraphVertical
data={mockCategoricalData}
width={800}
height={500}
margin={{
top: 20,
bottom: 80,
left: 60,
right: 20,
}}
/>
</SideComponentWrapper>
<SideComponentWrapper
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."
rightAligned
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
/>
</SideComponentWrapper>
</div>
);
}

View File

@ -0,0 +1,4 @@
.page {
display: flex;
flex-direction: column;
}

45
pages/samplePage.tsx Normal file
View File

@ -0,0 +1,45 @@
import { BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import React from "react";
import SideComponentWrapper from "@/components/SideComponentWrapper";
import { WordCloud } from "../components/WordCloud";
import styles from "./samplePage.module.css";
export default function SamplePage() {
return (
<div className={styles.page}>
<SideComponentWrapper
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."
>
<BarGraphVertical
data={mockCategoricalData}
width={800}
height={500}
margin={{
top: 20,
bottom: 80,
left: 60,
right: 20,
}}
/>
</SideComponentWrapper>
<SideComponentWrapper
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."
rightAligned
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
/>
</SideComponentWrapper>
</div>
);
}