added blog post tag filter buttons

src/routes/blog/+page.svelte

@@ -2,8 +2,12 @@
     import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/viewport/content.svelte";
     // import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
-    import { posts, type BlogPostLink } from "./posts";
+    import { BlogPostTag, posts, type BlogPostLink } from "./posts";
     import BlogGallery from "$lib/lists/blog-gallery.svelte";
+
+    function selectFilter(tag: string) {
+        console.log(tag);
+    }
     
     // let entries: GalleryEntry[] = posts.map(mapEntries);
 
@@ -34,5 +38,35 @@
         banner="robert.webp"
         bannerAlt="View at a tram bridge rising and then curving to the left." />
 
+    <!-- TODO descriptions on filter click -->
+    <div class="tag-filter-container">
+        {#each Object.values(BlogPostTag) as tag}
+            <button onclick={() => {
+                selectFilter(tag)
+            }} class="post-tag tag-filter">{tag}</button>
+        {/each}
+    </div>
+
     <BlogGallery {posts} />
-</Content>
+</Content>
+
+<style>
+    .tag-filter-container {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 8px;
+    }
+
+    .tag-filter {
+        width: fit-content;
+        font-size: 0.9rem;
+        color: var(--color-text);
+        padding: 8px;
+        border-radius: 12px;
+        cursor: pointer;
+    }
+
+    .tag-filter:hover {
+        background-color: aqua;
+    }
+</style>