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,38 @@
+import type { DiscoverExpert } from "@/lib/discover";
+import { initials } from "@/lib/feed-model";
+
+function Rating({ rating, reviews }: { rating: number | null; reviews: number | null }) {
+  if (rating === null && reviews === null) return null;
+  return (
+    <span className="rail-meta">
+      {rating !== null ? <span aria-label={`Rated ${rating.toFixed(1)} out of 5`}>★ {rating.toFixed(1)}</span> : null}
+      {reviews !== null ? <span> ({reviews} {reviews === 1 ? "review" : "reviews"})</span> : null}
+    </span>
+  );
+}
+
+export function FeaturedExpertsRail({ experts }: { experts: DiscoverExpert[] }) {
+  if (experts.length === 0) return null;
+  return (
+    <section className="rail" aria-labelledby="rail-experts">
+      <h2 id="rail-experts">Featured experts</h2>
+      <ul className="rail-list">
+        {experts.map((e) => (
+          <li key={String(e.id)} className="rail-card expert-card" data-testid="expert-card">
+            {e.pictureUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img className="avatar" src={e.pictureUrl} alt="" width={40} height={40} />
+            ) : (
+              <span className="avatar avatar-initials" aria-hidden="true">{initials(e.displayName)}</span>
+            )}
+            <div className="rail-text">
+              <strong className="rail-name">{e.displayName || "Expert"}</strong>
+              {e.byline ? <span className="rail-byline">{e.byline}</span> : null}
+              <Rating rating={e.rating} reviews={e.reviewsCount} />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}