Skip to content

Refactor BlogCard component for improved styling #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KUL236 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor BlogCard component for improved styling #46

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 27 additions & 15 deletions components/blog-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,40 +19,52 @@ interface BlogCardProps {
export default function BlogCard({ post }: BlogCardProps) {
return (
<Link href={`/a/${post.slug}`} className="group h-full">
<article className="flex flex-col h-full bg-white shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative rounded-lg">
<article className="relative flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl">

{post.featured && (
<div className="absolute top-3 right-3 z-20">
<Star className="w-5 h-5 fill-[#FFBF00] text-[#FFBF00] drop-shadow-sm" />
<Star className="h-5 w-5 fill-[#FFBF00] text-[#FFBF00] drop-shadow-sm" />
</div>
)}

<div className="relative w-full">
<Image
src={
post.image.startsWith("/")
? `${post.image}`
: post.image
}
src={post.image.startsWith("/") ? post.image : post.image}
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove redundant ternary operator.

Both branches of the conditional return the same value (post.image), making the ternary unnecessary.

Apply this diff to simplify:

-            src={post.image.startsWith("/") ? post.image : post.image}
+            src={post.image}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
src={post.image.startsWith("/") ? post.image : post.image}
src={post.image}
🤖 Prompt for AI Agents 
In components/blog-card.tsx around line 32 the src prop uses a redundant ternary
(src={post.image.startsWith("/") ? post.image : post.image}); remove the ternary
and set src directly to post.image to simplify the code and avoid useless
conditional logic.

alt={post.title}
width={1200}
height={630}
className="w-full h-auto object-contain transition-transform duration-500 group-hover:scale-105"
className="h-auto w-full object-contain transition-transform duration-500 group-hover:scale-105"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent" />
<div className="absolute inset-0 bg-gradient-to-br from-[#228B22]/10 via-transparent to-[#FFBF00]/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<div className="absolute inset-0 bg-gradient-to-br from-[#228B22]/10 via-transparent to-[#FFBF00]/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
</div>

<div className="flex flex-col flex-grow p-6">
<h2 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:bg-gradient-to-r group-hover:from-[#228B22] group-hover:to-[#91A511] group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300">
<div className="flex flex-grow flex-col p-6">
{/* ✅ FIXED TITLE */}
<h2
className="
mb-3 line-clamp-2 text-xl font-bold
text-foreground
transition-all duration-300
group-hover:bg-gradient-to-r
group-hover:from-[#228B22]
group-hover:to-[#91A511]
group-hover:bg-clip-text
group-hover:text-transparent
dark:group-hover:bg-none
dark:group-hover:text-foreground
"
>
{post.title}
</h2>

<p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
<p className="mb-4 line-clamp-3 text-muted-foreground">
{post.excerpt}
</p>

<div className="mt-auto flex items-center justify-between text-sm text-gray-500">
<div className="flex items-center gap-1 group-hover:text-[#228B22] transition-colors">
<User className="w-4 h-4" />
<div className="mt-auto flex items-center justify-between text-sm text-muted-foreground">
<div className="flex items-center gap-1 transition-colors group-hover:text-[#228B22]">
<User className="h-4 w-4" />
<span>{post.author}</span>
</div>
</div>
Expand Down