add metadata to header

gregrickaby · Feb 13, 2024 · 6d2cee3 · 6d2cee3
1 parent 996a6c2
commit 6d2cee3
Showing 1 changed file with 35 additions and 10 deletions.
diff --git a/components/Posts.tsx b/components/Posts.tsx
@@ -1,7 +1,9 @@
 'use client'
 
 import Media from '@/components/Media'
+import {getTimeAgo} from '@/lib/functions'
 import {RedditPostResponse} from '@/lib/types'
+import {IconArrowUp, IconClock, IconMessage} from '@tabler/icons-react'
 import Masonry from 'react-masonry-css'
 
 /**
@@ -26,19 +28,42 @@ export default function Posts(posts: RedditPostResponse) {
     >
       {posts.data.children.length > 0 &&
         posts.data.children.map(({data}) => (
-          <div
-            className="flex flex-col gap-4 rounded border p-6 pt-4 shadow-xl dark:border-zinc-800 dark:bg-zinc-700"
+          <article
+            className="flex flex-col gap-4 rounded border p-6 pt-4 text-sm shadow-xl dark:border-zinc-800 dark:bg-zinc-700"
             key={data.id}
           >
-            <a
-              className="block text-sm leading-none lg:text-base"
-              href={`https://www.reddit.com${data.permalink}`}
-              rel="noopener noreferrer"
-            >
-              {data.title}
-            </a>
+            <header className="flex gap-4 text-left">
+              <div className="flex flex-col items-center gap-0">
+                <IconArrowUp height={16} width={16} />
+                <span className="font-bold">{data.score}</span>
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <a
+                  className="text-base font-bold leading-tight"
+                  href={`https://www.reddit.com${data.permalink}`}
+                  rel="noopener noreferrer"
+                >
+                  {data.title}
+                </a>
+                <div className="flex gap-2 text-xs">
+                  <time className="flex items-center gap-1">
+                    <IconClock height={16} width={16} />
+                    {getTimeAgo(data.created_utc)}
+                  </time>
+                  <a
+                    className="flex items-center gap-1"
+                    href={`https://www.reddit.com${data.permalink}`}
+                    rel="noopener noreferrer"
+                  >
+                    <IconMessage height={16} width={16} />
+                    {data.num_comments}
+                  </a>
+                </div>
+              </div>
+            </header>
             <Media {...data} />
-          </div>
+          </article>
         ))}
     </Masonry>
   )