Skip to content

Refactor BlogCard component for improved styling #50

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 #50

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
66 changes: 47 additions & 19 deletions components/blog-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,42 +19,70 @@ 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
bg-white
shadow-md
transition
md:hover:-translate-y-1
md:hover:shadow-xl
"
>
{post.featured && (
<div className="absolute top-3 right-3 z-20">
<Star className="w-5 h-5 fill-[#FFBF00] text-[#FFBF00] drop-shadow-sm" />
<div className="absolute right-3 top-3 z-20">
<Star className="h-5 w-5 fill-[#FFBF00] text-[#FFBF00]" />
</div>
)}

{/* Image */}
<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 unnecessary ternary operator.

Both branches of the ternary return post.image, making the condition pointless. Either simplify to just src={post.image} or complete the intended logic if there was meant to be different handling for relative vs absolute paths.

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 47, the src prop uses a redundant
ternary that returns post.image in both branches; replace the ternary with a
single src={post.image} (or, if intended, implement the missing different
handling for relative vs absolute paths), removing the unnecessary condition.

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 md: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 md: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">
{/* Content */}
<div className="flex flex-grow flex-col p-4 sm:p-6">
<h2
className="
mb-3
line-clamp-2
text-lg
font-bold
text-gray-900
transition-all
duration-300
sm:text-xl
md:group-hover:bg-gradient-to-r
md:group-hover:from-[#228B22]
md:group-hover:to-[#91A511]
md:group-hover:bg-clip-text
md:group-hover:text-transparent
"
>
{post.title}
</h2>

<p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
<p className="mb-4 line-clamp-3 text-sm sm:text-base text-gray-600">
{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" />
<span>{post.author}</span>
</div>
<div className="mt-auto flex items-center gap-1 text-sm text-gray-500">
<User className="h-4 w-4" />
<span>{post.author}</span>
</div>
</div>
</article>
Expand Down