From 6787eb1c00a50be0ee9723c58c9bb578ba287c05 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sun, 9 Jul 2023 10:48:24 +0900
Subject: [PATCH] refactor(blog): improve meta tags styling (#76)

---
 apps/blog/src/components/PostCard.tsx |  2 +-
 apps/blog/src/pages/Page/Meta.tsx     | 45 ++++++++++++++-------------
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/apps/blog/src/components/PostCard.tsx b/apps/blog/src/components/PostCard.tsx
index c0c53b3..f9e1119 100644
--- a/apps/blog/src/components/PostCard.tsx
+++ b/apps/blog/src/components/PostCard.tsx
@@ -40,7 +40,7 @@ export default function PostCard({ postData, className }: Props) {
                                 ))}
                         </TagList>
                         <hr />
-                        <div className="flex flex-wrap items-center gap-2">
+                        <div className="flex flex-wrap items-center gap-x-4">
                             <div className="flex items-center gap-2 whitespace-nowrap">
                                 <FontAwesomeIcon icon={faCalendar} />
                                 {date || "Unknown date"}
diff --git a/apps/blog/src/pages/Page/Meta.tsx b/apps/blog/src/pages/Page/Meta.tsx
index c783713..f1ef6ea 100644
--- a/apps/blog/src/pages/Page/Meta.tsx
+++ b/apps/blog/src/pages/Page/Meta.tsx
@@ -9,37 +9,38 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
 export default function Meta(props: { fetchedPage: PageData }) {
     return (
-        <div className="text-light-text-gray dark:text-dark-text-gray">
+        <div className="flex flex-wrap gap-x-4 text-light-text-gray dark:text-dark-text-gray">
             {/* posts count */}
             {props.fetchedPage.length > 0 && (
-                <>
+                <div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
                     <FontAwesomeIcon icon={faFile} />
-                    &nbsp;&nbsp;
                     {props.fetchedPage.length} post
                     {props.fetchedPage.length > 1 && "s"}{" "}
-                    &nbsp;&nbsp;&nbsp;&nbsp;
-                </>
+                </div>
             )}
             {/* date */}
-            <FontAwesomeIcon icon={faCalendar} />
-            &nbsp;&nbsp;
-            {props.fetchedPage.date || "Unknown date"}
-            &nbsp;&nbsp;&nbsp;&nbsp;
+            <div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
+                <FontAwesomeIcon icon={faCalendar} />
+                {props.fetchedPage.date || "Unknown date"}
+            </div>
+
             {/* read time */}
-            <FontAwesomeIcon icon={faHourglass} />
-            &nbsp;&nbsp;
-            {props.fetchedPage.readTime
-                ? props.fetchedPage.readTime + " read"
-                : "unknown length"}
-            &nbsp;&nbsp;&nbsp;&nbsp;
+            <div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
+                <FontAwesomeIcon icon={faHourglass} />
+                {props.fetchedPage.readTime
+                    ? props.fetchedPage.readTime + " read"
+                    : "unknown length"}
+            </div>
+
             {/* word count */}
-            <FontAwesomeIcon icon={faBook} />
-            &nbsp;&nbsp;
-            {props.fetchedPage.wordCount
-                ? props.fetchedPage.wordCount +
-                  " word" +
-                  (props.fetchedPage.wordCount > 1 && "s")
-                : "unknown words"}
+            <div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
+                <FontAwesomeIcon icon={faBook} />
+                {props.fetchedPage.wordCount
+                    ? props.fetchedPage.wordCount +
+                      " word" +
+                      (props.fetchedPage.wordCount > 1 && "s")
+                    : "unknown words"}
+            </div>
         </div>
     )
 }