42 lines
969 B
TypeScript
42 lines
969 B
TypeScript
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}>
|
|
{data.map((datum, index) => {
|
|
return (
|
|
<div key={`${datum.name}-${index}`} className={styles.navItem}>
|
|
<a href={datum.url}>
|
|
<h4>{String(index).padStart(2, "0")} </h4>
|
|
<p>{datum.name}</p>
|
|
</a>
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
</section>
|
|
);
|
|
}
|