Add SectionHeader component (Closes #74) #75

Merged
e26chiu merged 4 commits from sectionheader-component into main 2022-11-05 09:01:47 -04:00
3 changed files with 41 additions and 0 deletions

View File

@ -0,0 +1,19 @@
.header {
display: flex;
flex-direction: column;
justify-content: center;
padding: calc(40rem / 16) 0;
text-align: center;
}
.title {
color: var(--primary-accent-light);
font-size: calc(70rem / 16);
margin: calc(40rem / 16) auto;
}
.subTitle {
color: var(--primary-accent-lighter);
font-size: calc(26rem / 16);
margin: auto;
}

View File

@ -0,0 +1,17 @@
import React from "react";
import styles from "./SectionHeader.module.css";
interface SectionHeaderProps {
title: string;
subtitle?: string;
}
export function SectionHeader({ title, subtitle }: SectionHeaderProps) {
return (
<div className={styles.header}>
<h1 className={styles.title}>{title}</h1>
{subtitle && <h5 className={styles.subTitle}>{subtitle}</h5>}
</div>
);
}

View File

@ -7,6 +7,7 @@ import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { SectionHeader } from "@/components/SectionHeader";
import { WordCloud } from "@/components/WordCloud";
import styles from "./samplePage.module.css";
@ -18,6 +19,10 @@ export default function SamplePage() {
return (
<div className={styles.page}>
<Header />
<SectionHeader
title="Demographics"
subtitle="An insight into the demographics of UWs CS programs"
/>
<ComponentWrapper
heading="What program are you in?"
bodyText="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."