feat: display game thumbnails using GameImage component across game and person detail lists.

frontend/src/PersonDetails.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import {
   Person,
   AddOpinionRequest,
@@ -9,6 +9,7 @@ import {
   AuthStatusResponse,
 } from "../items";
 import { apiFetch } from "./api";
+import { GameImage } from "./GameImage";
 
 export const PersonDetails = () => {
   const { name } = useParams<{ name: string }>();
@@ -116,21 +117,23 @@ export const PersonDetails = () => {
         <h2>{person.name}</h2>
         <ul className="grid-container">
           {person.opinion.map((op, i) => (
-            <li
+            <Link
+              to={`/game/${encodeURIComponent(op.title)}`}
               key={i}
               className="list-item"
-              style={{ borderColor: op.wouldPlay ? "#4caf50" : "#f44336" }}
+              style={{
+                textDecoration: "none",
+                color: "inherit",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
+              }}
             >
               <strong>{op.title}</strong>
-              <div
-                style={{
-                  color: op.wouldPlay ? "#4caf50" : "#f44336",
-                  marginTop: "0.5rem",
-                }}
-              >
-                {op.wouldPlay ? "Would Play" : "Would Not Play"}
-              </div>
-            </li>
+
+              <GameImage game={op.title} />
+            </Link>
           ))}
         </ul>
       </div>
@@ -192,6 +195,23 @@ export const PersonDetails = () => {
               Add
             </button>
           </div>
+          <div style={{ marginTop: "1rem" }}>
+            <Link
+              to={`/game/${encodeURIComponent(gameTitle)}`}
+              key={gameTitle}
+              className="list-item"
+              style={{
+                textDecoration: "none",
+                color: "inherit",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <strong>{gameTitle}</strong>
+              <GameImage game={gameTitle} />
+            </Link>
+          </div>
         </div>
       )}
     </div>