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

Add a new blog post display style with larger images and author details

Browse Source 
Introduce a BlogCard component to display articles in a two-column grid layout below the carousel, featuring larger images, author information, date, title, excerpt, and view count.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c8fc9f7d-54c1-4d04-bfaa-75be55bf11bb
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 21:59:35 +00:00
parent 6aa729090f
commit e6f9b04d99
1 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -180,6 +180,41 @@ function MediumCard({ article, focalPoints }: { article: Article; focalPoints?:
);
}
function BlogCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) {
const isVideo = article.category === "Video";
const objPos = getObjectPosition(article.coverImage, focalPoints);
return (
<Link href={`/article/${article.slug}`}>
<div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border flex flex-col" data-testid={`card-blog-${article.id}`}>
<div className="relative flex-shrink-0">
<div className="overflow-hidden">
<img src={article.coverImage} alt={article.title} className="w-full aspect-[16/9] object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: objPos }} loading="lazy" />
</div>
{isVideo && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
<Play className="w-5 h-5 text-white ml-0.5" fill="white" />
</div>
</div>
)}
</div>
<div className="p-4 flex flex-col flex-1">
<div className="flex items-center gap-2 mb-2">
<span className="text-xs font-medium text-primary">{article.author}</span>
<span className="text-muted-foreground text-xs">{timeAgo(new Date(article.publishedAt))}</span>
</div>
<h3 className="font-bold text-card-foreground text-base leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
<p className="text-sm text-muted-foreground mt-2 leading-relaxed line-clamp-3 flex-1">{article.excerpt}</p>
<div className="flex items-center gap-2 mt-3 text-muted-foreground text-xs">
<Eye className="w-3.5 h-3.5" />
{article.views.toLocaleString()}
</div>
</div>
</div>
</Link>
);
}
function SideCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) {
const isVideo = article.category === "Video";
const objPos = getObjectPosition(article.coverImage, focalPoints);
@ -381,10 +416,6 @@ export default function Home() {
const row2 = articles.slice(0, 2);
const row3 = articles.slice(2, 4);
const remaining = articles.slice(4);
const rows: Article[][] = [];
for (let i = 0; i < remaining.length; i += 4) {
rows.push(remaining.slice(i, i + 4));
}
return (
<div className="min-h-screen bg-background">
@ -414,13 +445,13 @@ export default function Home() {
</div>
</div>
{rows.map((row, ri) => (
<div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row.map((a) => (
<MediumCard key={a.id} article={a} focalPoints={focalPoints} />
{remaining.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{remaining.map((a) => (
<BlogCard key={a.id} article={a} focalPoints={focalPoints} />
))}
</div>
))}
)}
</main>
<Footer />