Guard featured post rendering and add fallbacks
cgen-f48d3fc9c9c34fb0982fa1ea4131d6e2
This commit is contained in:
parent
999e723ced
commit
a038b7da3f
1 changed files with 56 additions and 56 deletions
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue