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