Add view count and description snippet to grid video cards
Date and views share a meta line; description shows up to 2 lines below — gives enough context to judge a video during discovery without opening it. Both fields are optional so cards without them stay compact. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -19,6 +19,14 @@ function formatDate(dateStr) {
|
||||
return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
function formatViews(n) {
|
||||
if (!n) return null;
|
||||
if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B views`;
|
||||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n >= 100_000_000 ? 0 : 1)}M views`;
|
||||
if (n >= 1_000) return `${Math.round(n / 1_000)}K views`;
|
||||
return `${n} views`;
|
||||
}
|
||||
|
||||
function IconBtn({ onClick, title, active, pending, children }) {
|
||||
return (
|
||||
<button
|
||||
@@ -364,7 +372,16 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
|
||||
)}
|
||||
</div>
|
||||
|
||||
{date && <span className="text-[11px] text-zinc-600">{date}</span>}
|
||||
<div className="flex items-center gap-1.5 flex-wrap text-[11px] text-zinc-600">
|
||||
{date && <span>{date}</span>}
|
||||
{video.view_count > 0 && <><span>·</span><span>{formatViews(video.view_count)}</span></>}
|
||||
</div>
|
||||
|
||||
{video.description && (
|
||||
<p className="text-[11px] leading-relaxed text-zinc-500 line-clamp-2 mt-0.5">
|
||||
{video.description.replace(/\n+/g, " ")}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Actions — fade in on hover */}
|
||||
<div className="mt-auto pt-1.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150">
|
||||
|
||||
Reference in New Issue
Block a user