Skip to content

Commit 60c31fd

Browse files
TOMJIDTOMJID
committed
[archive-client] (refactor/blog-ui): Make blog details meta section fully responsive .
- Restructure author metadata layout from single-row to multi-row responsive design - Center Subscribe and Bookmark action buttons on every screens - Reorganize metadata sections for better visual hierarchy: * Author info and Follow button (top) * Date, read time, and view count (middle) * Subscribe and Bookmark buttons (bottom, centered) - Update quote style to single quotes for consistency (linting) - Improve mobile UX by prioritizing centered call-to-action buttons - Maintain consistent spacing across all breakpoints This change enhances the mobile user experience by making interactive elements more accessible and properly centered, while optimizing desktop layout for information density.
1 parent 5d853cb commit 60c31fd

1 file changed

Lines changed: 51 additions & 44 deletions

File tree

‎archive-client/components/blogs/details/BlogDetailsContent.tsx‎

Lines changed: 51 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function BlogDetailsContent({
2525
const renderedContent = useMemo(
2626
() => (
2727
<div
28-
className="prose prose-base dark:prose-invert max-w-none
28+
className='prose prose-base dark:prose-invert max-w-none
2929
prose-headings:font-bold prose-headings:text-foreground
3030
prose-h1:text-2xl prose-h1:mb-4 prose-h1:mt-8
3131
prose-h2:text-xl prose-h2:mb-3 prose-h2:mt-6
@@ -40,8 +40,7 @@ export function BlogDetailsContent({
4040
prose-img:rounded-lg prose-img:shadow-lg prose-img:my-6
4141
prose-table:my-4 prose-th:p-3 prose-td:p-3
4242
prose-hr:my-8
43-
"
44-
>
43+
'>
4544
<ReactMarkdown remarkPlugins={[remarkGfm]}>
4645
{post.content}
4746
</ReactMarkdown>
@@ -51,95 +50,103 @@ export function BlogDetailsContent({
5150
);
5251

5352
return (
54-
<article className="lg:col-span-8 space-y-4">
53+
<article className='lg:col-span-8 space-y-4'>
5554
{/* Badges */}
5655
{(post.is_featured || post.is_pinned) && (
57-
<div className="flex items-center gap-2">
56+
<div className='flex items-center gap-2'>
5857
{post.is_featured && (
59-
<Badge className="bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20 h-6 px-2.5">
58+
<Badge className='bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20 h-6 px-2.5'>
6059
🔥 Featured
6160
</Badge>
6261
)}
6362
{post.is_pinned && (
64-
<Badge className="bg-primary/10 text-primary border-primary/20 h-6 px-2.5">
63+
<Badge className='bg-primary/10 text-primary border-primary/20 h-6 px-2.5'>
6564
📌 Pinned
6665
</Badge>
6766
)}
6867
</div>
6968
)}
7069

7170
{/* Title */}
72-
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground leading-tight">
71+
<h1 className='text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground leading-tight'>
7372
{post.title}
7473
</h1>
7574

76-
{/* Author & Meta */}
77-
<div className="flex justify-between items-center pb-4 border-b">
78-
<div className="flex flex-wrap items-center gap-3">
79-
<div className="flex items-center gap-2">
80-
<Avatar className="h-8 w-8 border-2 border-border">
81-
<AvatarFallback
82-
className={`${getAuthorColor(post.created_by)} text-white text-xs font-bold`}
83-
>
84-
{getAuthorInitials(post.created_by)}
85-
</AvatarFallback>
86-
</Avatar>
87-
<span className="text-sm font-semibold">
88-
User {post.created_by}
89-
</span>
75+
{/* Top row: Author & Meta */}
76+
<div className='flex flex-col gap-4 pb-4 border-b'>
77+
{/* Author info and meta data */}
78+
<div className='flex justify-between'>
79+
{/* left side: Author info & Follow button */}
80+
<div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3'>
81+
<div className='flex flex-wrap items-center gap-3'>
82+
<div className='flex items-center gap-2'>
83+
<Avatar className='h-8 w-8 border-2 border-border'>
84+
<AvatarFallback
85+
className={`${getAuthorColor(post.created_by)} text-white text-xs font-bold`}>
86+
{getAuthorInitials(post.created_by)}
87+
</AvatarFallback>
88+
</Avatar>
89+
<span className='text-sm font-semibold'>
90+
User {post.created_by}
91+
</span>
92+
</div>
93+
<Button variant='outline' size='sm' className='w-fit'>
94+
<User className='h-3.5 w-3.5 mr-1.5' />
95+
Follow
96+
</Button>
97+
</div>
9098
</div>
91-
<Button variant="outline" size="sm" className="w-fit">
92-
<User className="h-3.5 w-3.5 mr-1.5" />
93-
Follow
94-
</Button>
95-
<div className="flex items-center gap-3 text-sm text-muted-foreground">
96-
<span className="flex items-center gap-1.5">
97-
<Calendar className="h-4 w-4" />
99+
100+
{/* right side: Date, read time, views */}
101+
<div className='flex flex-wrap items-center gap-3 text-sm text-muted-foreground'>
102+
<span className='flex items-center gap-1.5'>
103+
<Calendar className='h-4 w-4' />
98104
{new Date(post.created_at).toLocaleDateString("en-US", {
99105
month: "short",
100106
day: "numeric",
101107
year: "numeric",
102108
})}
103109
</span>
104-
<span className="flex items-center gap-1.5">
105-
<Clock className="h-4 w-4" />
110+
<span className='flex items-center gap-1.5'>
111+
<Clock className='h-4 w-4' />
106112
{readTime}
107113
</span>
108-
<span className="flex items-center gap-1.5">
109-
<Eye className="h-4 w-4" />
114+
<span className='flex items-center gap-1.5'>
115+
<Eye className='h-4 w-4' />
110116
{post.view_count.toLocaleString()}
111117
</span>
112118
</div>
113119
</div>
114-
<div className="flex items-center gap-2">
115-
<Button variant="outline" size="sm" className="w-fit">
116-
<Bookmark className="h-3.5 w-3.5" />
120+
121+
{/* Bottom row: Action buttons */}
122+
<div className='flex items-center justify-center gap-2'>
123+
<Button variant='outline' size='sm' className='w-fit'>
124+
<Bookmark className='h-3.5 w-3.5' />
117125
</Button>
118-
<Button size="sm" className="w-fit bg-primary hover:bg-primary/90">
126+
<Button size='sm' className='w-fit bg-primary hover:bg-primary/90'>
119127
Subscribe
120128
</Button>
121129
</div>
122130
</div>
123131

124132
{/* Summary */}
125133
{post.summary && (
126-
<div className="bg-muted/50 border-l-4 border-primary rounded-r-lg p-4">
127-
<p className="text-sm text-muted-foreground italic leading-relaxed">
134+
<div className='bg-muted/50 border-l-4 border-primary rounded-r-lg p-4'>
135+
<p className='text-sm text-muted-foreground italic leading-relaxed'>
128136
{post.summary}
129137
</p>
130138
</div>
131139
)}
132140

133141
{/* Tags */}
134142
{tags.length > 0 && (
135-
<div className="flex flex-wrap items-center gap-2">
136-
<Hash className="h-4 w-4 text-muted-foreground" />
143+
<div className='flex flex-wrap items-center gap-2'>
144+
<Hash className='h-4 w-4 text-muted-foreground' />
137145
{tags.map((tag) => (
138146
<Badge
139147
key={tag}
140-
variant="secondary"
141-
className="h-6 px-2.5 cursor-pointer hover:bg-primary hover:text-white transition-colors"
142-
>
148+
variant='secondary'
149+
className='h-6 px-2.5 cursor-pointer hover:bg-primary hover:text-white transition-colors'>
143150
{tag}
144151
</Badge>
145152
))}

0 commit comments

Comments
 (0)