Update top stories to show title, author, and time
Remove images from the top stories section and display only the title, author, and publication time. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 5779a0f5-e81b-4638-abee-a351ca3e4a1c Replit-Helium-Checkpoint-Created: true
This commit is contained in:
parent
1eaed39618
commit
d0b775b3a0
BIN
attached_assets/image_1772311221097.png
Normal file
BIN
attached_assets/image_1772311221097.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@ -185,19 +185,14 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
|
|||||||
<span className="w-1 h-4 bg-primary rounded-full" />
|
<span className="w-1 h-4 bg-primary rounded-full" />
|
||||||
Top-Storys
|
Top-Storys
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-3">
|
<div className="space-y-0">
|
||||||
{articles.slice(0, 5).map((article) => (
|
{articles.slice(0, 5).map((article) => (
|
||||||
<Link key={article.id} href={`/article/${article.slug}`}>
|
<Link key={article.id} href={`/article/${article.slug}`}>
|
||||||
<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="group cursor-pointer py-2.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">
|
<h4 className="text-sm font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
|
||||||
<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 className="flex items-center gap-1.5 mt-1">
|
||||||
</div>
|
<span className="text-[11px] text-muted-foreground">{article.author}</span>
|
||||||
<div className="flex-1 min-w-0">
|
<span className="text-muted-foreground/50 text-[11px]">{timeAgo(new Date(article.publishedAt))}</span>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user