56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import { PageRoutes } from "data/routes";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
import styles from "./Sections.module.css";
|
|
|
|
interface SectionsProps {
|
|
/* Whether to display the "Sections" title and separator that appears on the left. */
|
|
showHeader?: boolean;
|
|
/* Width of the entire Sections, in px. */
|
|
width?: number;
|
|
data: PageRoutes;
|
|
className?: string;
|
|
}
|
|
|
|
export function Sections({
|
|
data,
|
|
showHeader = true,
|
|
className,
|
|
}: SectionsProps) {
|
|
return (
|
|
<section
|
|
className={
|
|
className ? `${className} ${styles.sections}` : `${styles.sections}`
|
|
}
|
|
>
|
|
{showHeader ? (
|
|
<>
|
|
<h1>Sections</h1>
|
|
<div className={styles.separator} />
|
|
</>
|
|
) : (
|
|
""
|
|
)}
|
|
<nav className={styles.nav}>
|
|
<ul>
|
|
{Object.values(data).map((datum, index) => {
|
|
return (
|
|
<li key={`${datum.name}-${index}`}>
|
|
<span className={styles.linkNumber}>
|
|
{String(index).padStart(2, "0")}{" "}
|
|
</span>
|
|
<span className={styles.linkName}>
|
|
<Link className={styles.linkName} href={datum.url}>
|
|
{datum.name}
|
|
</Link>
|
|
</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
);
|
|
}
|