Add SectionHeader component (Closes #74) #75
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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 UW’s 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."
|
||||
|
|
Loading…
Reference in New Issue