gm4ebnr3j: Add three-column layout with featured experts and trending minnects rails

2026-10-19 17:28:42 -06:00
parent 6201fb0d28
commit b97a77471b
7 changed files with 267 additions and 1 deletions
@@ -0,0 +1,40 @@
+import type { DiscoverMinnect } from "@/lib/discover";
+import { initials } from "@/lib/feed-model";
+
+export function TrendingMinnectsRail({ minnects }: { minnects: DiscoverMinnect[] }) {
+  if (minnects.length === 0) return null;
+  return (
+    <section className="rail" aria-labelledby="rail-trending">
+      <h2 id="rail-trending">Trending minnects</h2>
+      <ul className="rail-list">
+        {minnects.map((m) => {
+          const who = m.expert.displayName || "Expert";
+          return (
+            <li key={String(m.id)} className="rail-card minnect-card" data-testid="minnect-card">
+              <div className="minnect-who">
+                {m.expert.pictureUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img className="avatar avatar-sm" src={m.expert.pictureUrl} alt="" width={28} height={28} />
+                ) : (
+                  <span className="avatar avatar-sm avatar-initials" aria-hidden="true">{initials(who)}</span>
+                )}
+                <strong className="rail-name">{who}</strong>
+              </div>
+              {m.thumbnailUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img className="minnect-thumb" src={m.thumbnailUrl} alt={m.question ? `Thumbnail for: ${m.question}` : "Minnect thumbnail"} />
+              ) : null}
+              {m.question ? <p className="minnect-question">{m.question}</p> : null}
+              {m.views !== null ? (
+                <span className="rail-meta">{m.views.toLocaleString("en-US")} {m.views === 1 ? "view" : "views"}</span>
+              ) : null}
+              {m.audio.url ? (
+                <audio className="minnect-audio" controls preload="none" src={m.audio.url} aria-label={`Play answer from ${who}`} />
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}