Created componet wrapper
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
b586d52f72
commit
ac446f7b07
|
@ -2,12 +2,13 @@
|
||||||
"typescript.tsdk": "node_modules/typescript/lib",
|
"typescript.tsdk": "node_modules/typescript/lib",
|
||||||
"eslint.format.enable": true,
|
"eslint.format.enable": true,
|
||||||
"eslint.codeActionsOnSave.mode": "all",
|
"eslint.codeActionsOnSave.mode": "all",
|
||||||
|
"css.lint.validProperties": ["composes"],
|
||||||
"css.format.spaceAroundSelectorSeparator": true,
|
"css.format.spaceAroundSelectorSeparator": true,
|
||||||
"[css]": {
|
"[css]": {
|
||||||
"editor.suggest.insertMode": "replace",
|
"editor.suggest.insertMode": "replace",
|
||||||
"gitlens.codeLens.scopes": ["document"],
|
"gitlens.codeLens.scopes": ["document"],
|
||||||
"editor.formatOnSave": true,
|
"editor.formatOnSave": true,
|
||||||
"editor.defaultFormatter": "vscode.css-language-features"
|
"editor.defaultFormatter": "vscode.css-language-features",
|
||||||
},
|
},
|
||||||
"[javascript]": {
|
"[javascript]": {
|
||||||
"editor.formatOnSave": false,
|
"editor.formatOnSave": false,
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -73,7 +73,11 @@ h2 {
|
||||||
color: var(--primary-heading);
|
color: var(--primary-heading);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3,
|
h3 {
|
||||||
|
color: var(--secondary-heading);
|
||||||
|
font-size: calc(45rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
|
@ -89,6 +93,10 @@ a:hover {
|
||||||
color: var(--link-hover);
|
color: var(--link-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: calc(28rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
body {
|
body {
|
||||||
--primary-background: var(--dark--primary-background);
|
--primary-background: var(--dark--primary-background);
|
||||||
|
|
|
@ -2,6 +2,8 @@ import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
|
||||||
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
import SideComponentWrapper from "@/components/SideComponentWrapper";
|
||||||
|
|
||||||
import { ColorPalette } from "../components/ColorPalette";
|
import { ColorPalette } from "../components/ColorPalette";
|
||||||
import { WordCloud } from "../components/WordCloud";
|
import { WordCloud } from "../components/WordCloud";
|
||||||
|
|
||||||
|
@ -59,6 +61,36 @@ export default function Home() {
|
||||||
value: word.value,
|
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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
.page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue