sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add images to top stories and adjust layout

Browse Source 
Add thumbnail images to top stories list items and modify the component to include them.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4f1916e6-1fe0-4d1f-b75f-cf8e7f67ece8
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 20:40:06 +00:00
parent 8432d4e240
commit 1eaed39618
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/pages/home.tsx
View File

@ -188,12 +188,17 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
<div className="space-y-3">
{articles.slice(0, 5).map((article) => (
<Link key={article.id} href={`/article/${article.slug}`}>
<div className="group cursor-pointer py-1.5 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
<div className="flex items-center gap-1.5 mb-0.5">
<span className="text-[10px] font-medium text-primary">{article.category}</span>
<span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
<div className="group cursor-pointer flex gap-3 py-1.5 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
<div className="flex-shrink-0 w-20 h-14 rounded overflow-hidden">
<img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1.5 mb-0.5">
<span className="text-[10px] font-medium text-primary">{article.category}</span>
<span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
</div>
<h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
</div>
<h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
</div>
</Link>
))}