clean up styled JSX of colorful homepage links

components/notes/List.module.scss

@@ -1,22 +1,6 @@
 .section {
   margin: 2.4em 0;
 
-  .year {
-    font-size: 2.2em;
-    margin-top: 0;
-    margin-bottom: 0.5em;
-  }
-
-  .list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    li:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
   &:first-of-type {
     margin-top: 0;
   }
@@ -26,6 +10,34 @@
   }
 }
 
+.year {
+  font-size: 2.2em;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
+.list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  line-height: 1.75;
+  margin-bottom: 1em;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.date {
+  width: 5.25em;
+  flex-shrink: 0;
+  color: var(--medium);
+}
+
 @media screen and (max-width: 768px) {
   .section .year {
     font-size: 2em;

components/notes/List.tsx

@@ -1,23 +1,38 @@
-import ListItem from "./ListItem";
+import Link from "next/link";
+import { format, parseISO } from "date-fns";
 
 import styles from "./List.module.scss";
 
-export default function List({ allNotes }) {
+type NoteProps = {
+  title: string;
+  date: string;
+  slug: string;
+};
+
+export default function List({ notesByYear }) {
   const sections = [];
 
-  Object.entries(allNotes).forEach(([year, notes]: [string, any]) => {
+  Object.entries(notesByYear).forEach(([year, notes]: [string, NoteProps[]]) => {
     sections.push(
       <section key={year} className={styles.section}>
         <h2 className={styles.year}>{year}</h2>
         <ul className={styles.list}>
           {notes.map((note) => (
-            <ListItem key={note.slug} title={note.title} date={note.date} slug={note.slug} />
+            <li key={note.slug} className={styles.row}>
+              <span className={styles.date}>{format(parseISO(note.date), "MMM d")}</span>
+              <span>
+                <Link href={`/notes/${note.slug}/`} prefetch={false}>
+                  <a>{note.title}</a>
+                </Link>
+              </span>
+            </li>
           ))}
         </ul>
       </section>
     );
   });
 
+  // grouped notes enter this component ordered chronologically -- we want reverse chronological
   const reversed = sections.reverse();
 
   return <>{reversed}</>;

components/notes/ListItem.module.scss

@@ -1,11 +0,0 @@
-.row {
-  display: flex;
-  line-height: 1.75;
-  margin-bottom: 1em;
-}
-
-.date {
-  width: 5.25em;
-  flex-shrink: 0;
-  color: var(--medium);
-}

components/notes/ListItem.tsx

@@ -1,23 +0,0 @@
-import Link from "next/link";
-import { format, parseISO } from "date-fns";
-
-import styles from "./ListItem.module.scss";
-
-export type Props = {
-  title: string;
-  date: string;
-  slug: string;
-};
-
-export default function ListItem({ title, date, slug }: Props) {
-  return (
-    <li className={styles.row}>
-      <span className={styles.date}>{format(parseISO(date), "MMM d")}</span>
-      <span>
-        <Link href={`/notes/${slug}/`} prefetch={false}>
-          <a>{title}</a>
-        </Link>
-      </span>
-    </li>
-  );
-}