www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Merged center and side wrappers
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Shahan Nedadahandeh 2022-08-15 18:30:21 -07:00
parent 216dece1ed
commit d44f79ac43
Signed by: snedadah
GPG Key ID: 8638C7F917385B01
5 changed files with 47 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/CenterComponentWrapper.module.css
View File

@ -1,19 +0,0 @@
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: calc(40rem / 16) auto;
padding: 0 15%;
}
.graphWrapper {
margin-top: calc(50rem / 16);
}
@media screen and (max-width: 768px) {
.wrapper {
padding: 0 calc(20rem / 16);
}
}

25
components/CenterComponentWrapper.tsx
View File

@ -1,25 +0,0 @@
import React from "react";
import styles from "./CenterComponentWrapper.module.css";
type FullComponentWrapperProps = {
children: React.ReactNode;
heading: string;
body: string;
};
export function CenterComponentWrapper({
heading,
body,
children,
}: FullComponentWrapperProps) {
return (
<section className={styles.wrapper}>
<div>
<h3>{heading}</h3>
<p>{body}</p>
</div>
<div className={styles.graphWrapper}>{children}</div>
</section>
);
}

15
components/SideComponentWrapper.module.css → components/ComponentWrapper.module.css
View File

@ -2,7 +2,7 @@
background-color: var(--secondary-background);
display: flex;
padding: calc(40rem / 16) calc(50rem / 16);
margin: calc(40rem / 16) 0;
margin: calc(65rem / 16) 0;
width: 90%;
}
@ -28,6 +28,19 @@
.noBackground {
background: none;
align-self: center;
}
.wrapperCenter {
flex-direction: column;
text-align: center;
gap: calc(25rem / 16);
margin: 0 0 calc(65rem / 16) 0;
padding: 0 15%;
}
.wrapperCenter > h3 {
margin: 0;
}
@media screen and (max-width: 768px) {

22
components/SideComponentWrapper.tsx → components/ComponentWrapper.tsx
View File

@ -1,27 +1,37 @@
import React from "react";
import styles from "./SideComponentWrapper.module.css";
import styles from "./ComponentWrapper.module.css";
type AlignOption = "left" | "center" | "right";
type ComponentWrapperProps = {
children: React.ReactNode;
heading: string;
body: string;
align?: "left" | "right";
align?: AlignOption;
noBackground?: boolean;
center?: boolean;
};
export function SideComponentWrapper({
export function ComponentWrapper({
heading,
body,
children,
align = "left",
noBackground = false,
}: ComponentWrapperProps) {
const alignClasses: { [key in AlignOption]: string } = {
left: styles.wrapperLeft,
center: styles.wrapperCenter,
right: styles.wrapperRight,
};
return (
<div
className={`${
align === "right" ? styles.wrapperRight : styles.wrapperLeft
} ${noBackground ? styles.noBackground : ""}`}
className={`
${alignClasses[align]}
${noBackground ? styles.noBackground : ""}
`}
>
<div className={styles.internalWrapper}>
<h3>{heading}</h3>

32
pages/samplePage.tsx
View File

@ -4,8 +4,7 @@ import React from "react";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { CenterComponentWrapper } from "@/components/CenterComponentWrapper";
import { SideComponentWrapper } from "@/components/SideComponentWrapper";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { WordCloud } from "../components/WordCloud";
@ -17,7 +16,7 @@ export default function SamplePage() {
return (
<div className={styles.page}>
<SideComponentWrapper
<ComponentWrapper
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."
>
@ -33,11 +32,12 @@ export default function SamplePage() {
right: 20,
}}
/>
</SideComponentWrapper>
</ComponentWrapper>
<CenterComponentWrapper
<ComponentWrapper
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."
align="center"
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
@ -45,12 +45,12 @@ export default function SamplePage() {
value: word.value,
}))}
// For components that we don't want to match the width necessarily we can provide direct values
width={isMobile ? width / 1.25 : 1000}
width={isMobile ? width / 1.5 : 800}
height={500}
/>
</CenterComponentWrapper>
</ComponentWrapper>
<SideComponentWrapper
<ComponentWrapper
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."
align="right"
@ -67,11 +67,12 @@ export default function SamplePage() {
right: 20,
}}
/>
</SideComponentWrapper>
</ComponentWrapper>
<SideComponentWrapper
<ComponentWrapper
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."
align="left"
noBackground
>
<BarGraphHorizontal
@ -86,9 +87,9 @@ export default function SamplePage() {
right: 20,
}}
/>
</SideComponentWrapper>
</ComponentWrapper>
<SideComponentWrapper
<ComponentWrapper
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."
>
@ -104,11 +105,12 @@ export default function SamplePage() {
right: 20,
}}
/>
</SideComponentWrapper>
</ComponentWrapper>
<SideComponentWrapper
<ComponentWrapper
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."
align="left"
noBackground
>
<WordCloud
@ -119,7 +121,7 @@ export default function SamplePage() {
width={isMobile ? width / 1.5 : width / 2}
height={500}
/>
</SideComponentWrapper>
</ComponentWrapper>
</div>
);
}