Adding tags filter

src/components/Badge.svelte

@@ -1,6 +1,7 @@
 <script>
   	import { onMount } from 'svelte';
     export let text = 'Badge';
+    export let handleTags;
     export let color = getRandomHexColor();
     function getRandomHexColor() {
       const letters = '0123456789ABCDEF';
@@ -19,11 +20,21 @@
 </script>
 
 
-<span class="rounded-full px-3 py-1 text-xs "
+<a
+  href={null}
+  class="rounded-full px-3 py-1 text-xs "
   style={
     `background-color: ${color};
-    color: ${contrastedColor}`
+    color: ${contrastedColor};
+    cursor: pointer;`
   }
+  on:click={handleTags(text)}
 >
   {text}
-</span>
+</a>
+
+<style>
+  a:hover {
+    filter: brightness(0.9);
+  }
+</style>

src/components/Cards/ArticleCard.svelte

@@ -6,29 +6,32 @@
   export let date;
   export let image;
   export let tag;
+  export let handleTags;
   export let authors;
 </script>
 
-<a href="/blog/{slug}">
 <div class="w-full">
-  <div class="md:aspect-video aspect-square ">
-    <img class="object-cover w-full h-full " src={image} alt="Card" />
-  </div>
-  <div class="space-y-2 mt-5">
+  <a href="/blog/{slug}">
+    <div class="md:aspect-video aspect-square ">
+      <img class="object-cover w-full h-full " src={image} alt="Card" />
+    </div>
+  </a>
+  <div class="mt-5">
     <div class="flex">
       {#if tag}
-      <Badge text={tag}/>
+      <Badge text={tag} handleTags={handleTags} />
       {/if}
     </div>
-    <h2 class="font-extrabold text-xl">{title}</h2>
-    {#if authors }
-      <p class="text-sm">
-        {#each authors as author, i }
-          <span>{author.authors_id.name || ''}{#if i < (authors.length-1)}, {/if}</span>
-        {/each}
-      </p>
-    {/if}
-    <p class="text-sm text-gray-400"><HumanDate date={date}/></p>
+    <a class="space-y-2" href="/blog/{slug}">
+      <h2 class="mt-2 font-extrabold text-xl">{title}</h2>
+      {#if authors }
+        <p class="text-sm">
+          {#each authors as author, i }
+            <span>{author.authors_id.name || ''}{#if i < (authors.length-1)}, {/if}</span>
+          {/each}
+        </p>
+      {/if}
+      <p class="text-sm text-gray-400"><HumanDate date={date}/></p>
+    </a>
   </div>
-</div>
-</a>
+</div>

src/components/TagsMenu.svelte

@@ -0,0 +1,31 @@
+<script>
+  export let activeTag;
+  export let handleTags;
+  export let tags;
+</script>
+
+{#each tags as tag}
+  <a
+    href={null}
+    class={activeTag === tag ? 'text-cmxgreen' : null}
+    on:click={() => handleTags(tag)}
+  >
+    {tag.toUpperCase()}
+  </a>
+{/each}
+
+<style>
+  a {
+    display: inline-block;
+    text-transform: uppercase;
+    font-weight: 700;
+    line-height: 2.5;
+  }
+  a:not(:last-child) {
+    padding-right: 15px;
+  }
+  a:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+</style>

src/routes/blog/+page.server.js

@@ -20,9 +20,15 @@ export async function load() {
     sort: ['-date_published'],
   }))
 
+  let tags = ['todos'];
+  posts.forEach(item => {
+    tags = [...new Set([...tags, ...item.tags.map((tag = '') => tag.toLowerCase()).flat()])]
+  })
+
 	return {
 		blog,
-    posts
+    posts,
+    tags,
 	}
 }
 

src/routes/blog/+page.svelte

@@ -1,14 +1,25 @@
 <script>
   import ArticleCard from "@/components/Cards/ArticleCard.svelte";
   import BlogHero from "@/components/BlogHero.svelte";
+  import TagsMenu from "@/components/TagsMenu.svelte";
   export let data
-  const { blog, posts } = data
+  const { blog, posts, tags } = data
+  let filteredPosts = [...posts]
+  let activeTag = "todos"
+
+  const handleTags = (tag = "") => {
+    tag = tag.toLocaleLowerCase()
+    activeTag = tag
+    filteredPosts = tag === "todos"
+      ? [...posts]
+      : posts.filter(post => post.tags.map((tagItem = '') => tagItem.toLowerCase()).includes(tag))
+  }
 </script>
 <div class="container my-20 mx-auto">
 
   <div class="container m-auto px-3">
     <div class="my-7">
-      <h1 class="text-5xl text-cmxblack font-bold">Blog</h1>
+      <h1 class="text-5xl text-cmxgreen font-bold">Blog</h1>
     </div>
     <BlogHero 
     slug={blog.highlight_post.slug}
@@ -20,13 +31,21 @@
     content={blog.highlight_post.content}
     />
   </div>
+  <div class="container mx-auto px-3 pt-16 pb-12 text-center">
+    <TagsMenu
+      activeTag={activeTag}
+      handleTags={handleTags}
+      tags={tags}
+    />
+  </div>
   <div class="container m-auto p-3">
     <div class="md:grid grid-cols-3 gap-5">
-    {#each posts as post}
+    {#each filteredPosts as post}
       <ArticleCard
       slug={post.slug}
       title={post.title}
       tag={post.tags[0]}
+      handleTags={handleTags}
       authors={post.authors}
       date={post.date_published || post.date_created}
       image={`https://content.codeandomexico.org/assets/${post.post_image}`}