Add image preview to news listing cards

src/app/news/page.tsx

@@ -45,13 +45,28 @@ export default async function NewsPage() {
                 className="card hover"
                 style={{ display: "flex", flexDirection: "column" }}
               >
-                <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
+                {a.image ? (
-                  <Link href={`/news/${a.slug}`}>{a.title}</Link>
+                  <img
-                </h3>
+                    src={a.image}
-                <p className="muted" style={{ margin: "0 0 0.5rem", fontSize: "0.85rem" }}>
+                    alt=""
-                  {formatDate(a.createdAt)}
+                    className="w-full rounded-t-lg"
-                </p>
+                    style={{ aspectRatio: "16/9", objectFit: "cover" }}
-                <p style={{ margin: 0 }}>{excerpt(a.shortStory, 200)}</p>
+                  />
+                ) : (
+                  <div
+                    className="w-full rounded-t-lg"
+                    style={{ aspectRatio: "16/9", backgroundColor: "var(--color-surface)" }}
+                  />
+                )}
+                <div style={{ padding: "0.75rem" }}>
+                  <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
+                    <Link href={`/news/${a.slug}`}>{a.title}</Link>
+                  </h3>
+                  <p className="muted" style={{ margin: "0 0 0.5rem", fontSize: "0.85rem" }}>
+                    {formatDate(a.createdAt)}
+                  </p>
+                  <p style={{ margin: 0 }}>{excerpt(a.shortStory, 200)}</p>
+                </div>
               </article>
             ))}
           </div>