feat(ux): adapt post link layout to small devices

mateusfg7 · Jun 20, 2023 · 838ce70 · 838ce70
1 parent c1a6251
commit 838ce70
Showing 1 changed file with 17 additions and 30 deletions.
diff --git a/src/shared/components/post-list/post-link.tsx b/src/shared/components/post-list/post-link.tsx
@@ -12,13 +12,13 @@ interface Props {
 }
 
 export function PostLink({ post, hideYear = false }: Props) {
-  const showDate = !post.test && post.status !== 'planned'
-  const showReadingTime = !post.test && post.status !== 'planned'
+  const showDate = !post.test
+  const showReadingTime = !post.test
 
   if (post.status === 'planned') {
     return (
       <section className="group cursor-pointer space-y-2">
-        <div className="flex items-center justify-start gap-2">
+        <div className="flex items-center justify-between md:justify-start gap-2">
           <h2 className="text-xl font-bold text-neutral-700 dark:text-neutral-500">
             {post.title}
           </h2>
@@ -27,38 +27,28 @@ export function PostLink({ post, hideYear = false }: Props) {
             <PlannedBadge />
           </span>
         </div>
-        <span className="text-neutral-500">
-          {showDate && (
-            <span>
-              <Date
-                dateString={post.date}
-                dateFormat={hideYear ? 'LLL d' : 'LLL d, yyyy'}
-              />{' '}
-              &#8226;{' '}
-            </span>
-          )}
-
+        <span className="hidden md:inline text-neutral-500">
           {post.description}
         </span>
       </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">
+      <span className="flex items-center md:flex-col md:items-end md:justify-center gap-4 md:gap-2 whitespace-nowrap 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">
+          <span className="inline-flex md:flex-row-reverse items-center gap-1">
+            <CalendarBlank />
             <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>
+          <span className="inline-flex md:flex-row-reverse items-center gap-1">
             <Clock />
+            <span>{Math.ceil(post.reading_time.minutes)} min read</span>
           </span>
         )}
       </span>
@@ -67,20 +57,17 @@ export function PostLink({ post, hideYear = false }: Props) {
     return (
       <Link
         href={`/post/${post.id}`}
-        className="group flex justify-between gap-3"
+        className="group flex flex-col md:flex-row justify-between gap-1 md:gap-3"
       >
         <section className="space-y-1">
-          <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 />}
-            </div>
+          <div className="flex items-center justify-between md:justify-start gap-2">
+            <h2 className="text-xl font-bold text-neutral-700 group-hover:text-blue-700 dark:text-neutral-500 group-active:text-blue-700 group-active:dark:text-blue-500 dark:group-hover:text-blue-500">
+              {post.title}
+            </h2>
+            {post.test && <TestBadge />}
+            {post.status === 'draft' && !post.test && <DraftBadge />}
           </div>
-          <span className="inline-flex items-center gap-3 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-neutral-400">
+          <span className="hidden md:inline-flex items-center gap-3 text-neutral-500 group-hover:text-neutral-700 group-active:text-neutral-700 group-active:dark:text-neutral-400 dark:group-hover:text-neutral-400">
             {post.description}
           </span>
         </section>