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" });
|
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 }) {
|
function IconBtn({ onClick, title, active, pending, children }) {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
@@ -364,7 +372,16 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
|
|||||||
)}
|
)}
|
||||||
</div>
|
</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 */}
|
{/* 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">
|
<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