sort imports. link to author.

gregrickaby · Feb 14, 2024 · 4db9561 · 4db9561
1 parent 13b9217
commit 4db9561
Showing 1 changed file with 26 additions and 10 deletions.
diff --git a/components/Posts.tsx b/components/Posts.tsx
@@ -1,9 +1,15 @@
 'use client'
 
 import Media from '@/components/Media'
-import {getTimeAgo} from '@/lib/functions'
+import {formatNumber, getTimeAgo} from '@/lib/functions'
 import {RedditPostResponse} from '@/lib/types'
-import {IconArrowUp, IconClock, IconMessage} from '@tabler/icons-react'
+import {
+  IconArrowUp,
+  IconClock,
+  IconMessage,
+  IconUser
+} from '@tabler/icons-react'
+import {decode} from 'html-entities'
 import Masonry from 'react-masonry-css'
 
 /**
@@ -23,8 +29,10 @@ export default function Posts({data}: RedditPostResponse) {
         >
           <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>
+              <IconArrowUp height={18} width={18} />
+              <span className="text-base font-bold">
+                {formatNumber(data.score)}
+              </span>
             </div>
 
             <div className="flex flex-col gap-1">
@@ -33,21 +41,29 @@ export default function Posts({data}: RedditPostResponse) {
                 href={`https://www.reddit.com${data.permalink}`}
                 rel="noopener noreferrer"
               >
-                {data.title}
+                {decode(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/u/${decode(data.author)}`}
+                  rel="noopener noreferrer"
+                >
+                  <IconUser height={16} width={16} />
+                  u/{decode(data.author)}
+                </a>
                 <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}
+                  {formatNumber(data.num_comments)}
                 </a>
+                <time className="flex items-center gap-1">
+                  <IconClock height={16} width={16} />
+                  {getTimeAgo(data.created_utc)}
+                </time>
               </div>
             </div>
           </header>