feat(ui): add badges on knowledge link component

mateusfg7 · May 20, 2023 · 1d359ec · 1d359ec
1 parent 82c27ce
commit 1d359ec
Showing 1 changed file with 47 additions and 14 deletions.
diff --git a/src/components/KnowledgeLink.tsx b/src/components/KnowledgeLink.tsx
@@ -3,27 +3,60 @@ import Link from 'next/link'
 
 import { Date } from './Date'
 import { Post } from 'contentlayer/generated'
+import { DraftBadge, PlannedBadge, TestBadge } from './PostBadges'
 
 interface Props {
   post: Post
   hideYear?: boolean
 }
 
 export function KnowledgeLink({ post, hideYear = false }: Props) {
-  return (
-    <Link href={`/post/${post.id}`} className="group">
-      <section>
-        <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>
-        <span className="text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-neutral-400">
-          <Date
-            dateString={post.date}
-            dateFormat={hideYear ? 'LLL d' : 'LLL d, yyyy'}
-          />{' '}
-          &#8226; {post.description}
+  const showDate = !post.test && post.status !== 'planned'
+
+  if (post.status === 'planned') {
+
+    return (
+      <section className="space-y-2 group cursor-pointer">
+        <div className='flex items-center justify-start gap-2'>
+          <h2 className="text-xl font-bold text-neutral-700 dark:text-neutral-500">
+            {post.title}
+          </h2>
+          <span className='group-hover:animate-wiggle group-hover:animate-infinite'>
+            <PlannedBadge />
+          </span>
+        </div>
+        <span className="text-neutral-500">
+          {
+            showDate && (<span><Date dateString={post.date} dateFormat={hideYear ? 'LLL d' : 'LLL d, yyyy'} /> &#8226; </span>)
+          }
+
+          {post.description}
         </span>
       </section>
-    </Link>
-  )
+    )
+  }
+  else {
+
+    return (
+      <Link href={`/post/${post.id}`} className="group">
+        <section className="space-y-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>
+          <span className="text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-neutral-400">
+            {
+              showDate && (<span><Date dateString={post.date} dateFormat={hideYear ? 'LLL d' : 'LLL d, yyyy'} /> &#8226; </span>)
+            }
+
+            {post.description}
+          </span>
+        </section>
+      </Link>
+    )
+  }
+
 }