Code review fixes
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
ff2ec0ce3b
commit
5c87e7636e
|
@ -1,8 +1,8 @@
|
|||
.sections {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 50%;
|
||||
gap: 15px;
|
||||
min-width: calc(1000rem / 16);
|
||||
gap: calc(15rem / 16);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
@ -17,7 +17,7 @@
|
|||
background-color: var(--label);
|
||||
height: calc(1rem / 16);
|
||||
width: 100%;
|
||||
margin-top: calc(24rem / 16);
|
||||
margin-top: calc(16rem / 16);
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
@ -27,10 +27,8 @@
|
|||
}
|
||||
|
||||
.navItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
margin: calc(20rem / 16);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.navItem:first-child {
|
||||
|
@ -39,14 +37,19 @@
|
|||
|
||||
.nav h4 {
|
||||
color: var(--secondary-accent);
|
||||
margin: 0 calc(14rem / 16) 0 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: var(--primary-accent-light);
|
||||
.nav a:hover p {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.nav p {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
|
|
@ -8,20 +8,30 @@ interface SectionsData {
|
|||
}
|
||||
|
||||
interface SectionsProps {
|
||||
/* Whether to display the "Sections" title and separator that appears on the left. */
|
||||
showHeader?: boolean;
|
||||
data: SectionsData[];
|
||||
}
|
||||
|
||||
export default function Sections({ data }: SectionsProps) {
|
||||
export function Sections({ data, showHeader = true }: SectionsProps) {
|
||||
return (
|
||||
<section className={styles.sections}>
|
||||
<h1>Sections</h1>
|
||||
<div className={styles.separator} />
|
||||
{showHeader ? (
|
||||
<>
|
||||
<h1>Sections</h1>
|
||||
<div className={styles.separator} />
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<nav className={styles.nav}>
|
||||
{data.map((datum, index) => {
|
||||
return (
|
||||
<div key={`${datum.name}-${index}`} className={styles.navItem}>
|
||||
<h4>{String(index).padStart(2, "0")}</h4>
|
||||
<a href={datum.url}>{datum.name}</a>
|
||||
<a href={datum.url}>
|
||||
<h4>{String(index).padStart(2, "0")} </h4>
|
||||
<p>{datum.name}</p>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
@ -3,7 +3,7 @@ import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
|||
import { sectionsData } from "data/routes";
|
||||
import React from "react";
|
||||
|
||||
import Sections from "@/components/Sections";
|
||||
import { Sections } from "@/components/Sections";
|
||||
|
||||
import { ColorPalette } from "../components/ColorPalette";
|
||||
import { WordCloud } from "../components/WordCloud";
|
||||
|
@ -65,8 +65,8 @@ export default function Home() {
|
|||
|
||||
<h2>
|
||||
<code>{"<Sections />"}</code>
|
||||
<Sections data={sectionsData} />
|
||||
</h2>
|
||||
<Sections data={sectionsData} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue