Add Sections Component (#49)

Closes #43.

Will look better when !46 is merged in.

https://j285he-sections-csc-class-profile-staging-snedadah.k8s.csclub.cloud/playground/
Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: #49
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
pull/65/head
Jared He 3 months ago
parent e3948c0577
commit 8253f6cbab
  1. 2
      components/About.tsx
  2. 60
      components/Sections.module.css
  3. 45
      components/Sections.tsx
  4. 46
      data/routes.ts
  5. 26
      pages/playground.tsx

@ -2,7 +2,7 @@ import React from "react";
import styles from "./About.module.css";
export default function About() {
export function About() {
return (
<div className={styles.aboutWrapper}>
<AngleDecoration isBottom={false} />

@ -0,0 +1,60 @@
.sections {
display: flex;
flex-direction: row;
gap: calc(15rem / 16);
}
.sections h1 {
flex: 3;
text-align: right;
margin: 0;
}
.separator {
flex: 1;
background-color: var(--label);
height: calc(1rem / 16);
width: 100%;
margin-top: calc(30rem / 16);
}
.nav {
flex: 3;
display: flex;
flex-direction: column;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav li {
margin: calc(20rem / 16);
margin-left: 0;
}
.nav li:first-child {
margin-top: calc(18rem / 16);
}
.nav li .linkNumber {
color: var(--secondary-accent);
margin: 0;
display: inline;
}
.nav li a {
font-size: calc(24rem / 16);
color: var(--primary-text);
}
.nav li a:hover .linkName {
text-decoration: underline;
}
.nav li .linkName {
margin: 0;
display: inline;
}

@ -0,0 +1,45 @@
import React from "react";
import styles from "./Sections.module.css";
interface SectionsData {
name: string;
url: string;
}
interface SectionsProps {
/* Whether to display the "Sections" title and separator that appears on the left. */
showHeader?: boolean;
data: SectionsData[];
}
export function Sections({ data, showHeader = true }: SectionsProps) {
return (
<section className={styles.sections}>
{showHeader ? (
<>
<h1>Sections</h1>
<div className={styles.separator} />
</>
) : (
""
)}
<nav className={styles.nav}>
<ul>
{data.map((datum, index) => {
return (
<li key={`${datum.name}-${index}`}>
<a href={datum.url}>
<span className={styles.linkNumber}>
{String(index).padStart(2, "0")}{" "}
</span>
<span className={styles.linkName}>{datum.name}</span>
</a>
</li>
);
})}
</ul>
</nav>
</section>
);
}

@ -0,0 +1,46 @@
export const sectionsData = [
{
name: "Demographics",
url: "/",
},
{
name: "Academics",
url: "/",
},
{
name: "Co-op",
url: "/",
},
{
name: "Lifestyle and Interests",
url: "/",
},
{
name: "Intimacy and Drugs",
url: "/",
},
{
name: "Post-grad",
url: "/",
},
{
name: "Friends",
url: "/",
},
{
name: "Miscellaneous",
url: "/",
},
{
name: "Mental Health",
url: "/",
},
{
name: "Personal",
url: "/",
},
{
name: "Contributors",
url: "/",
},
];

@ -9,11 +9,13 @@ import {
mockPieData,
mockTimelineData,
} from "data/mocks";
import { sectionsData } from "data/routes";
import React from "react";
import About from "@/components/About";
import { About } from "@/components/About";
import { PieChart } from "@/components/PieChart";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { Sections } from "@/components/Sections";
import { Timeline } from "@/components/Timeline";
import { CenterWrapper } from "../components/CenterWrapper";
@ -27,14 +29,8 @@ export default function Home() {
<div className={styles.page}>
<h1>Playground</h1>
<p>Show off your components here!</p>
<ColorPalette />
<h2>
<code>{"<PieChart />"}</code>
</h2>
<div style={{ padding: "30px" }}>
<PieChart data={mockPieData} width={800} labelWidth={215} />
</div>
<ColorPalette />
<h2>
<code>Text Styles</code>
@ -46,6 +42,13 @@ export default function Home() {
<p>p p p p p p p p p p p p p p p p p p p p p p p p p p p p</p>
<a href="#">a a a a a a a a a a a a a a a a a a a a a a a a a a a a</a>
<h2>
<code>{"<PieChart />"}</code>
</h2>
<div style={{ padding: "30px" }}>
<PieChart data={mockPieData} width={800} labelWidth={215} />
</div>
<h2>
<code>{"<BarGraphHorizontal />"}</code>
</h2>
@ -129,10 +132,15 @@ export default function Home() {
</p>
</CenterWrapper>
<h2>
<code>{"<Sections />"}</code>
</h2>
<Sections data={sectionsData} />
<h2>
<code>{"<About />"}</code>
<About />
</h2>
<About />
<h2>
<code>{"<BoxPlot />"}</code>

Loading…
Cancel
Save