Add Sections
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
d0dc94441d
commit
ff2ec0ce3b
|
@ -0,0 +1,52 @@
|
||||||
|
.sections {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 50%;
|
||||||
|
gap: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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(24rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
flex: 3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin: calc(20rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navItem:first-child {
|
||||||
|
margin-top: calc(10rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav h4 {
|
||||||
|
color: var(--secondary-accent);
|
||||||
|
margin: 0 calc(14rem / 16) 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: var(--primary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
color: var(--primary-accent-light);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
|
@ -13,14 +13,19 @@ interface SectionsProps {
|
||||||
|
|
||||||
export default function Sections({ data }: SectionsProps) {
|
export default function Sections({ data }: SectionsProps) {
|
||||||
return (
|
return (
|
||||||
<section>
|
<section className={styles.sections}>
|
||||||
<h1>Sections</h1>
|
<h1>Sections</h1>
|
||||||
|
<div className={styles.separator} />
|
||||||
|
<nav className={styles.nav}>
|
||||||
{data.map((datum, index) => {
|
{data.map((datum, index) => {
|
||||||
return <div>
|
return (
|
||||||
<h4></h4>
|
<div key={`${datum.name}-${index}`} className={styles.navItem}>
|
||||||
<a></a>
|
<h4>{String(index).padStart(2, "0")}</h4>
|
||||||
</div>;
|
<a href={datum.url}>{datum.name}</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
|
</nav>
|
||||||
</section>
|
</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: "/",
|
||||||
|
},
|
||||||
|
];
|
|
@ -1,7 +1,10 @@
|
||||||
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
|
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
|
||||||
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
||||||
|
import { sectionsData } from "data/routes";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
import Sections from "@/components/Sections";
|
||||||
|
|
||||||
import { ColorPalette } from "../components/ColorPalette";
|
import { ColorPalette } from "../components/ColorPalette";
|
||||||
import { WordCloud } from "../components/WordCloud";
|
import { WordCloud } from "../components/WordCloud";
|
||||||
|
|
||||||
|
@ -59,6 +62,11 @@ export default function Home() {
|
||||||
value: word.value,
|
value: word.value,
|
||||||
}))}
|
}))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
<code>{"<Sections />"}</code>
|
||||||
|
<Sections data={sectionsData} />
|
||||||
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue