Change align prop

pull/32/head
Shahan Nedadahandeh 8 months ago
parent 29534e574b
commit ce302f6c03
Signed by: snedadah
GPG Key ID: 8638C7F917385B01
  1. 9
      components/CenterComponentWrapper.module.css
  2. 10
      components/SideComponentWrapper.tsx
  3. 3
      pages/samplePage.tsx

@ -8,15 +8,12 @@
padding: 0 15%;
}
.graphWrapper {
margin-top: calc(50rem / 16);
}
@media screen and (max-width: 768px) {
.wrapper {
padding: 0 calc(20rem / 16);
}
}
.graphWrapper {
margin-top: calc(50rem / 16);
}

@ -6,7 +6,7 @@ type ComponentWrapperProps = {
children: React.ReactNode;
heading: string;
body: string;
rightAligned?: boolean;
align?: "left" | "right";
noBackground?: boolean;
};
@ -14,14 +14,14 @@ export function SideComponentWrapper({
heading,
body,
children,
rightAligned = false,
align = "left",
noBackground = false,
}: ComponentWrapperProps) {
return (
<div
className={`${rightAligned ? styles.wrapperRight : styles.wrapperLeft} ${
noBackground ? styles.noBackground : ""
}`}
className={`${
align === "right" ? styles.wrapperRight : styles.wrapperLeft
} ${noBackground ? styles.noBackground : ""}`}
>
<div className={styles.internalWrapper}>
<h3>{heading}</h3>

@ -53,7 +53,7 @@ export default function SamplePage() {
<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
align="right"
>
<BarGraphHorizontal
className={styles.barGraphDemo}
@ -91,7 +91,6 @@ export default function SamplePage() {
<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
>
<BarGraphHorizontal
className={styles.barGraphDemo}

Loading…
Cancel
Save