feat(ui): move metadata to right on post link component

mateusfg7 · Jun 6, 2023 · 6b69cf6 · 6b69cf6
1 parent e1976e8
commit 6b69cf6
Showing 1 changed file with 34 additions and 28 deletions.
diff --git a/src/shared/components/post-list/post-link.tsx b/src/shared/components/post-list/post-link.tsx
@@ -43,42 +43,48 @@ export function PostLink({ post, hideYear = false }: Props) {
       </section>
     )
   } else {
+    const Metadata = () => (
+      <span className="group-hover:text-neutral-900dark:group-hover:text-neutral-300 flex flex-col items-end justify-center gap-2 whitespace-nowrap rounded-lg p-1 leading-none text-neutral-600 group-hover:text-neutral-700 dark:group-hover:text-neutral-400">
+        {showDate && (
+          <span className="inline-flex items-center gap-1">
+            <Date
+              dateString={post.date}
+              dateFormat={hideYear ? 'LLL d' : 'LLL d, yyyy'}
+            />
+            <CalendarBlank />
+          </span>
+        )}
+
+        {showReadingTime && (
+          <span className="inline-flex items-center gap-1">
+            <span>{Math.ceil(post.reading_time.minutes)} min read</span>
+            <Clock />
+          </span>
+        )}
+      </span>
+    )
+
     return (
-      <Link href={`/post/${post.id}`} className="group">
+      <Link
+        href={`/post/${post.id}`}
+        className="group flex justify-between gap-3"
+      >
         <section className="space-y-1">
-          <div className="flex items-center justify-start gap-2">
-            <h2 className="text-xl font-bold text-neutral-700 group-hover:text-blue-700 dark:text-neutral-500 dark:group-hover:text-blue-500">
-              {post.title}
-            </h2>
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center justify-start gap-2">
+              <h2 className="text-xl font-bold text-neutral-700 group-hover:text-blue-700 dark:text-neutral-500 dark:group-hover:text-blue-500">
+                {post.title}
+              </h2>
 
-            {post.test && <TestBadge />}
-            {post.status === 'draft' && !post.test && <DraftBadge />}
+              {post.test && <TestBadge />}
+              {post.status === 'draft' && !post.test && <DraftBadge />}
+            </div>
           </div>
           <span className="inline-flex items-center gap-3 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-neutral-400">
-            {(showDate || showReadingTime) && (
-              <span className="inline-flex items-center gap-2 rounded-lg bg-neutral-200/40 p-1 leading-none dark:bg-neutral-800/30">
-                {showDate && (
-                  <span className="inline-flex items-center gap-1">
-                    <CalendarBlank />
-                    <Date
-                      dateString={post.date}
-                      dateFormat={hideYear ? 'LLL d' : 'LLL d, yyyy'}
-                    />
-                  </span>
-                )}
-
-                {showReadingTime && (
-                  <span className="inline-flex items-center gap-1">
-                    <Clock />
-                    <span>{Math.ceil(post.reading_time.minutes)} min read</span>
-                  </span>
-                )}
-              </span>
-            )}
-
             {post.description}
           </span>
         </section>
+        {(showDate || showReadingTime) && <Metadata />}
       </Link>
     )
   }