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>
This commit is contained in:
parent
e3948c0577
commit
8253f6cbab
|
@ -2,7 +2,7 @@ import React from "react";
|
||||||
|
|
||||||
import styles from "./About.module.css";
|
import styles from "./About.module.css";
|
||||||
|
|
||||||
export default function About() {
|
export function About() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.aboutWrapper}>
|
<div className={styles.aboutWrapper}>
|
||||||
<AngleDecoration isBottom={false} />
|
<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,
|
mockPieData,
|
||||||
mockTimelineData,
|
mockTimelineData,
|
||||||
} from "data/mocks";
|
} from "data/mocks";
|
||||||
|
import { sectionsData } from "data/routes";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import About from "@/components/About";
|
import { About } from "@/components/About";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||||
|
import { Sections } from "@/components/Sections";
|
||||||
import { Timeline } from "@/components/Timeline";
|
import { Timeline } from "@/components/Timeline";
|
||||||
|
|
||||||
import { CenterWrapper } from "../components/CenterWrapper";
|
import { CenterWrapper } from "../components/CenterWrapper";
|
||||||
|
@ -27,14 +29,8 @@ export default function Home() {
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<h1>Playground</h1>
|
<h1>Playground</h1>
|
||||||
<p>Show off your components here!</p>
|
<p>Show off your components here!</p>
|
||||||
<ColorPalette />
|
|
||||||
|
|
||||||
<h2>
|
<ColorPalette />
|
||||||
<code>{"<PieChart />"}</code>
|
|
||||||
</h2>
|
|
||||||
<div style={{ padding: "30px" }}>
|
|
||||||
<PieChart data={mockPieData} width={800} labelWidth={215} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
<code>Text Styles</code>
|
<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>
|
<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>
|
<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>
|
<h2>
|
||||||
<code>{"<BarGraphHorizontal />"}</code>
|
<code>{"<BarGraphHorizontal />"}</code>
|
||||||
</h2>
|
</h2>
|
||||||
|
@ -130,9 +133,14 @@ export default function Home() {
|
||||||
</CenterWrapper>
|
</CenterWrapper>
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
<code>{"<About />"}</code>
|
<code>{"<Sections />"}</code>
|
||||||
<About />
|
|
||||||
</h2>
|
</h2>
|
||||||
|
<Sections data={sectionsData} />
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
<code>{"<About />"}</code>
|
||||||
|
</h2>
|
||||||
|
<About />
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
<code>{"<BoxPlot />"}</code>
|
<code>{"<BoxPlot />"}</code>
|
||||||
|
|
Loading…
Reference in New Issue