Add list of cells to mod detail pane

components/ModCellList.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Link from "next/link";
+
+import styles from "../styles/ModCellList.module.css";
+import type { CellCoord } from "./ModData";
+
+const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition";
+
+type Props = {
+  cells: CellCoord[];
+};
+
+const ModCellList: React.FC<Props> = ({ cells }) => {
+  return (
+    cells && (
+      <>
+        <h2>Cells</h2>
+        <ul className={styles["cell-list"]}>
+          {cells
+            // .sort((a, b) => b.unique_downloads - a.unique_downloads)
+            .map((cell) => (
+              <li
+                key={`cell-${cell.x},${cell.y}`}
+                className={styles["cell-list-item"]}
+              >
+                <div className={styles["cell-title"]}>
+                  <strong>
+                    <Link
+                      href={`/?cell=${encodeURIComponent(
+                        `${cell.x},${cell.y}`
+                      )}`}
+                    >
+                      <a className={styles.link}>
+                        {cell.x}, {cell.y}
+                      </a>
+                    </Link>
+                  </strong>
+                </div>
+              </li>
+            ))}
+        </ul>
+      </>
+    )
+  );
+};
+
+export default ModCellList;

components/ModData.tsx

@@ -2,6 +2,7 @@ import { format } from "date-fns";
 import React from "react";
 import useSWRImmutable from "swr/immutable";
 
+import ModCellList from "./ModCellList";
 import styles from "../styles/ModData.module.css";
 
 export interface CellCoord {
@@ -114,6 +115,7 @@ const ModData: React.FC<Props> = ({ selectedMod, counts }) => {
           <strong>Unique Downloads:</strong>{" "}
           {numberFmt.format(unique_downloads)}
         </div>
+        <ModCellList cells={data.cells} />
       </>
     );
   }

styles/ModCellList.module.css

@@ -0,0 +1,16 @@
+.cell-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.cell-list-item {
+  margin-bottom: 12px;
+}
+
+.cell-title {
+  margin-bottom: 8px;
+}
+
+a.link {
+  color: #72030a;
+}