Tags in blog post

1 files changed, 14 insertions, 5 deletions

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index a97dadf..628215f 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,14 +1,17 @@
 ---
 import Layout from './Default.astro';
-const { title, description, pubDate } = Astro.props;
-import { getCollection } from "astro:content";
-const postTags = (await getCollection('blog'));
+const { title, description, pubDate, tags } = Astro.props;
 ---
 
 <Layout title=`${title} - Andrew Lee` description={description}>
     <header>
         <h1 class="header-text">{title}</h1>
-        <small>{pubDate}</small>
+        <span>{pubDate}</span>
+        <div class="tags">
+            {tags.map(tag => (
+                    <span class="tag"><a href={`/blog/tags/${tag}`}>{tag}</a></span>
+            ))}
+        </div>
     </header>
     <div class="container">
         <main>
@@ -42,11 +45,17 @@ const postTags = (await getCollection('blog'));
         font-size: 1.5em;
         font-weight: 300;
     }
-
     .container {
         margin: 1em 10em 1em 10em;
     }
 
+    .tags {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        gap: 1em;
+    }
+
     @media (max-width: 992px) {
         .container {
             margin: 10px 20px 10px 20px;