36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import type { DiscoverMinnect } from "@/lib/discover";
|
|
import { MinnectMedia } from "./MinnectMedia";
|
|
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>
|
|
<MinnectMedia media={m.media} thumbnailUrl={m.thumbnailUrl} question={m.question} who={who} />
|
|
{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}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</section>
|
|
);
|
|
}
|