Add article thumbnail images to list view and article detail pages
Updated ArticleCard component to display thumbnail images on the right for list view. Modified Article page to display the article's image as a hero banner at the top. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/6ZMblp5
This commit is contained in:
@ -174,6 +174,16 @@ export default function Article() {
|
||||
<main className="max-w-7xl mx-auto px-6 py-12 pb-32">
|
||||
{/* Article Content */}
|
||||
<article className="mb-16 max-w-4xl mx-auto">
|
||||
{article.imageUrl && (
|
||||
<div className="mb-8 -mx-6 md:mx-0">
|
||||
<img
|
||||
src={article.imageUrl}
|
||||
alt={article.title}
|
||||
className="w-full h-auto max-h-[500px] object-cover rounded-none md:rounded-lg"
|
||||
data-testid="image-article-hero"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<header className="mb-8">
|
||||
<h1 className="text-4xl font-bold mb-4 text-gray-900 leading-tight" data-testid="text-article-title">{article.title}</h1>
|
||||
{article.excerpt && (
|
||||
|
||||
Reference in New Issue
Block a user