Guard featured post rendering and add fallbacks

cgen-f48d3fc9c9c34fb0982fa1ea4131d6e2
This commit is contained in:
Builder.io 2025-10-04 10:59:10 +00:00
parent 999e723ced
commit a038b7da3f

View file

@ -374,69 +374,69 @@ export default function Blog() {
</section> </section>
{/* Featured Post */} {/* Featured Post */}
<section className="py-12"> {activeFeaturedPost && (
<div className="container mx-auto px-4"> <section className="py-12">
<Card className="max-w-4xl mx-auto overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-scale-in"> <div className="container mx-auto px-4">
<div className="md:flex"> <Card className="max-w-4xl mx-auto overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-scale-in">
<div className="md:w-1/2"> <div className="md:flex">
<img <div className="md:w-1/2">
src={featuredPost.image} <img
alt={featuredPost.title} src={activeFeaturedPost.image ?? placeholderImage}
className="w-full h-64 md:h-full object-cover" alt={activeFeaturedPost.title}
/> className="w-full h-64 md:h-full object-cover"
</div> />
<div className="md:w-1/2 p-8">
<Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">
Featured
</Badge>
<CardTitle className="text-2xl mb-4 text-gradient">
{featuredPost.title}
</CardTitle>
<CardDescription className="text-base mb-6">
{featuredPost.excerpt}
</CardDescription>
<div className="flex items-center justify-between mb-6">
<div className="flex items-center space-x-4 text-sm text-muted-foreground">
<div className="flex items-center space-x-1">
<User className="h-4 w-4" />
<span>{featuredPost.author}</span>
</div>
<div className="flex items-center space-x-1">
<Calendar className="h-4 w-4" />
<span>{featuredPost.date}</span>
</div>
</div>
{featuredPost?.readTime && (
<Badge variant="outline">{featuredPost.readTime}</Badge>
)}
</div> </div>
<div className="md:w-1/2 p-8">
<Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">
Featured
</Badge>
<CardTitle className="text-2xl mb-4 text-gradient">
{activeFeaturedPost.title}
</CardTitle>
<CardDescription className="text-base mb-6">
{activeFeaturedPost.excerpt}
</CardDescription>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between mb-6">
<Button asChild> <div className="flex items-center space-x-4 text-sm text-muted-foreground">
<Link <div className="flex items-center space-x-1">
to={`/blog/${(featuredPost?.slug || "").toString()}`} <User className="h-4 w-4" />
> <span>{activeFeaturedPost.author || "AeThex Team"}</span>
Read Article </div>
<ArrowRight className="h-4 w-4 ml-2" /> <div className="flex items-center space-x-1">
</Link> <Calendar className="h-4 w-4" />
</Button> <span>{activeFeaturedPost.date}</span>
<div className="flex items-center space-x-4 text-sm text-muted-foreground"> </div>
<div className="flex items-center space-x-1">
<ThumbsUp className="h-4 w-4" />
<span>{featuredPost?.likes || 0}</span>
</div> </div>
<div className="flex items-center space-x-1"> {activeFeaturedPost.readTime && (
<MessageCircle className="h-4 w-4" /> <Badge variant="outline">{activeFeaturedPost.readTime}</Badge>
<span>{featuredPost?.comments || 0}</span> )}
</div>
<div className="flex items-center justify-between">
<Button asChild>
<Link to={`/blog/${buildSlug(activeFeaturedPost)}`}>
Read Article
<ArrowRight className="h-4 w-4 ml-2" />
</Link>
</Button>
<div className="flex items-center space-x-4 text-sm text-muted-foreground">
<div className="flex items-center space-x-1">
<ThumbsUp className="h-4 w-4" />
<span>{activeFeaturedPost.likes ?? 0}</span>
</div>
<div className="flex items-center space-x-1">
<MessageCircle className="h-4 w-4" />
<span>{activeFeaturedPost.comments ?? 0}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </Card>
</Card> </div>
</div> </section>
</section> )}
{/* Recent Posts */} {/* Recent Posts */}
<section className="py-20"> <section className="py-20">