Skip to content

Commit 6568f6c

Browse files
scott-the-programmerscott-the-programmer
committed
add stem between posts
1 parent b033e27 commit 6568f6c

File tree

1 file changed

+65
-63
lines changed

1 file changed

+65
-63
lines changed

‎src/components/BlogList.tsx‎

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -114,81 +114,83 @@ const BlogList: React.FC<BlogListProps> = ({ onPostSelect }) => {
114114
</div>
115115
</div>
116116
) : (
117-
<div className="max-w-3xl mx-auto space-y-6">
117+
<div className="max-w-3xl mx-auto">
118118
{posts.map((post, index) => (
119-
<article
120-
key={post.slug || index}
121-
className="bg-post rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
122-
onClick={() => post.slug && navigate(`/blog/${post.slug}`)}
123-
onMouseEnter={() => post.slug && prefetchBlogPost(post.slug)}
124-
>
125-
<div className="p-6">
126-
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
127-
<div className="flex-1">
128-
<h2 className="text-xl font-semibold text-gray-900 mb-2">
129-
{post.title || "Untitled Post"}
130-
</h2>
119+
<>
120+
<article
121+
key={post.slug || index}
122+
className="bg-post rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
123+
onClick={() => post.slug && navigate(`/blog/${post.slug}`)}
124+
onMouseEnter={() => post.slug && prefetchBlogPost(post.slug)}
125+
>
126+
<div className="p-6">
127+
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
128+
<div className="flex-1">
129+
<h2 className="text-xl font-semibold text-gray-900 mb-2">
130+
{post.title || "Untitled Post"}
131+
</h2>
131132

132-
{post.excerpt && (
133-
<p className="text-gray-600 mb-3 line-clamp-2">
134-
{post.excerpt}
135-
</p>
136-
)}
137-
</div>
133+
{post.excerpt && (
134+
<p className="text-gray-600 mb-3 line-clamp-2">
135+
{post.excerpt}
136+
</p>
137+
)}
138+
</div>
138139

139-
<div className="flex flex-col sm:items-end gap-2 sm:min-w-0 sm:flex-shrink-0">
140-
<time
141-
dateTime={post.publishDate}
142-
className="text-sm text-gray-500"
143-
>
144-
{formatDate(post.publishDate)}
145-
</time>
140+
<div className="flex flex-col sm:items-end gap-2 sm:min-w-0 sm:flex-shrink-0">
141+
<time
142+
dateTime={post.publishDate}
143+
className="text-sm text-gray-500"
144+
>
145+
{formatDate(post.publishDate)}
146+
</time>
146147

147-
{post.tags && post.tags.length > 0 && (
148-
<div className="flex flex-wrap gap-1 sm:justify-end">
149-
{post.tags.slice(0, 3).map((tag, tagIndex) => (
150-
<span
151-
key={tagIndex}
152-
className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full"
153-
>
154-
{tag}
155-
</span>
156-
))}
157-
{post.tags.length > 3 && (
158-
<span className="text-xs text-gray-500">
159-
+{post.tags.length - 3} more
160-
</span>
161-
)}
162-
</div>
163-
)}
148+
{post.tags && post.tags.length > 0 && (
149+
<div className="flex flex-wrap gap-1 sm:justify-end">
150+
{post.tags.slice(0, 3).map((tag, tagIndex) => (
151+
<span
152+
key={tagIndex}
153+
className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full"
154+
>
155+
{tag}
156+
</span>
157+
))}
158+
{post.tags.length > 3 && (
159+
<span className="text-xs text-gray-500">
160+
+{post.tags.length - 3} more
161+
</span>
162+
)}
163+
</div>
164+
)}
165+
</div>
164166
</div>
165-
</div>
166167

167-
<div className="mt-4 pt-4 border-t border-gray-100">
168-
<div className="flex items-center text-blue-600 hover:text-blue-800 text-sm font-medium">
169-
Read more
170-
<svg
171-
className="w-4 h-4 ml-1"
172-
fill="none"
173-
stroke="currentColor"
174-
viewBox="0 0 24 24"
175-
>
176-
<path
177-
strokeLinecap="round"
178-
strokeLinejoin="round"
179-
strokeWidth={2}
180-
d="M9 5l7 7-7 7"
181-
/>
182-
</svg>
168+
<div className="mt-4 pt-4 border-t border-gray-100">
169+
<div className="flex items-center text-blue-600 hover:text-blue-800 text-sm font-medium">
170+
Read more
171+
<svg
172+
className="w-4 h-4 ml-1"
173+
fill="none"
174+
stroke="currentColor"
175+
viewBox="0 0 24 24"
176+
>
177+
<path
178+
strokeLinecap="round"
179+
strokeLinejoin="round"
180+
strokeWidth={2}
181+
d="M9 5l7 7-7 7"
182+
/>
183+
</svg>
184+
</div>
183185
</div>
184186
</div>
185-
</div>
186-
</article>
187+
</article>
188+
<div className="stem w-1 h-4 bg-gray-600 my-2 mx-auto opacity-60"></div>
189+
</>
187190
))}
188191
</div>
189192
)}
190193
</div>
191-
<div className="stem w-1 h-4 bg-gray-600 my-2 mx-auto opacity-60"></div>
192194
<PlantPot />
193195
</div>
194196
);

0 commit comments

Comments
 (0)