Refine blog item metadata layout

mhhung/components/BlogItem.js

@@ -46,39 +46,13 @@ export const BlogItem = props => {
           </h2>
 
           {/* 文章資訊 */}
-          <header className='text-md text-[var(--primary-color)] dark:text-gray-300 flex-wrap flex items-center leading-6'>
+          <header className='text-sm text-[var(--primary-color)] dark:text-gray-300 leading-6 mb-2'>
-            <div className='space-x-2'>
-              <span className='text-sm'>
             發布於
             <SmartLink
               className='p-1 hover:text-red-400 transition-all duration-200'
               href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
               {post.date?.start_date || post.createdTime}
             </SmartLink>
-              </span>
-            </div>
-
-            <div className='text-sm'>
-              {/* {post.category && (
-                <SmartLink href={`/category/${post.category}`} className='p-1'>
-                  {' '}
-                  <span className='hover:text-red-400 transition-all duration-200'>
-                    <i className='fa-regular fa-folder mr-0.5' />
-                    {post.category}
-                  </span>
-                </SmartLink>
-              )} */}
-              {post?.tags &&
-                post?.tags?.length > 0 &&
-                post?.tags.map(t => (
-                  <SmartLink
-                    key={t}
-                    href={`/tag/${t}`}
-                    className=' hover:text-red-400 transition-all duration-200'>
-                    <span> #{t}</span>
-                  </SmartLink>
-                ))}
-            </div>
           </header>
 
           <main className='text-[var(--primary-color)] dark:text-gray-300 line-clamp-4 overflow-hidden text-ellipsis relative leading-[1.7]'>
@@ -94,6 +68,19 @@ export const BlogItem = props => {
               </div>
             )}
           </main>
+
+          {post?.tags && post?.tags?.length > 0 && (
+            <div className='mt-2 text-sm text-[var(--primary-color)] dark:text-gray-300 flex flex-wrap gap-2'>
+              {post.tags.map(t => (
+                <SmartLink
+                  key={t}
+                  href={`/tag/${t}`}
+                  className=' hover:text-red-400 transition-all duration-200'>
+                  <span>#{t}</span>
+                </SmartLink>
+              ))}
+            </div>
+          )}
         </article>
       </div>
     </div>