AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Update recent posts grid to use derived posts and slugs

Browse source 
cgen-87b23973dca5402ab55c6aa4846d22f2
This commit is contained in:
Builder.io 2025-10-04 10:59:45 +00:00
parent a038b7da3f
commit ad80d1db25
1 changed files with 80 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
client/pages/Blog.tsx
View file

@ -450,82 +450,92 @@ export default function Blog() {
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto"> {displayedPosts.length > 0 ? (
{filteredPosts.map((post, index) => ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
<Card {displayedPosts.map((post, index) => (
key={index} <Card
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up" key={buildSlug(post)}
style={{ animationDelay: `${index * 0.1}s` }} className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
> style={{ animationDelay: `${index * 0.1}s` }}
<CardHeader> >
<div className="flex items-start justify-between mb-2"> <CardHeader>
<Badge variant="outline" className="text-xs"> <div className="flex items-start justify-between mb-2">
{post.category} <Badge variant="outline" className="text-xs">
</Badge> {post.category || "General"}
{post.trending && (
<Badge className="bg-gradient-to-r from-orange-500 to-red-600 text-xs">
<TrendingUp className="h-3 w-3 mr-1" />
Trending
</Badge> </Badge>
)} {post.trending && (
</div> <Badge className="bg-gradient-to-r from-orange-500 to-red-600 text-xs">
<CardTitle className="text-lg hover:text-gradient transition-colors cursor-pointer"> <TrendingUp className="h-3 w-3 mr-1" />
{post.title} Trending
</CardTitle> </Badge>
<CardDescription className="text-sm"> )}
{post.excerpt}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between text-xs text-muted-foreground">
<div className="flex items-center space-x-2">
<User className="h-3 w-3" />
<span>{post.author}</span>
</div> </div>
<div className="flex items-center space-x-2"> <CardTitle className="text-lg hover:text-gradient transition-colors cursor-pointer">
<Calendar className="h-3 w-3" /> {post.title}
<span>{post.date}</span> </CardTitle>
</div> <CardDescription className="text-sm">
</div> {post.excerpt}
</CardDescription>
</CardHeader>
<div className="flex items-center justify-between"> <CardContent className="space-y-4">
<Badge variant="outline" className="text-xs"> <div className="flex items-center justify-between text-xs text-muted-foreground">
{post.readTime} <div className="flex items-center space-x-2">
</Badge> <User className="h-3 w-3" />
<div className="flex items-center space-x-3"> <span>{post.author || "AeThex Team"}</span>
<Button size="sm" variant="ghost">
<Bookmark className="h-3 w-3" />
</Button>
<Button size="sm" variant="ghost">
<Share className="h-3 w-3" />
</Button>
</div>
</div>
<div className="flex items-center justify-between pt-2 border-t border-border/30">
<div className="flex items-center space-x-4 text-xs text-muted-foreground">
<div className="flex items-center space-x-1">
<ThumbsUp className="h-3 w-3" />
<span>{post.likes}</span>
</div> </div>
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-2">
<MessageCircle className="h-3 w-3" /> <Calendar className="h-3 w-3" />
<span>{post.comments}</span> <span>{post.date || "Coming soon"}</span>
</div> </div>
</div> </div>
<Button size="sm" asChild>
<Link <div className="flex items-center justify-between">
to={`/blog/${post.title.toLowerCase().replace(/\s+/g, "-")}`} {post.readTime ? (
> <Badge variant="outline" className="text-xs">
Read More {post.readTime}
</Link> </Badge>
</Button> ) : (
</div> <span className="text-xs text-muted-foreground">
</CardContent> Quick read
</Card> </span>
))} )}
</div> <div className="flex items-center space-x-3">
<Button size="sm" variant="ghost">
<Bookmark className="h-3 w-3" />
</Button>
<Button size="sm" variant="ghost">
<Share className="h-3 w-3" />
</Button>
</div>
</div>
<div className="flex items-center justify-between pt-2 border-t border-border/30">
<div className="flex items-center space-x-4 text-xs text-muted-foreground">
<div className="flex items-center space-x-1">
<ThumbsUp className="h-3 w-3" />
<span>{post.likes ?? 0}</span>
</div>
<div className="flex items-center space-x-1">
<MessageCircle className="h-3 w-3" />
<span>{post.comments ?? 0}</span>
</div>
</div>
<Button size="sm" asChild>
<Link to={`/blog/${buildSlug(post)}`}>
Read More
</Link>
</Button>
</div>
</CardContent>
</Card>
))}
</div>
) : (
<div className="max-w-3xl mx-auto rounded-lg border border-border/40 bg-background/60 p-10 text-center text-muted-foreground animate-slide-up">
No articles available in this category yet. Please check back soon.
</div>
)}
</div> </div>
</section> </section>