Page: /tags/{slug}

src/assets/scss/_styles.scss

@@ -13,8 +13,7 @@ a {
 }
 
 .badge-default {
-  @extend %badge;
-  @apply bg-style-primary text-style-primary-inverted;
+  @apply text-style-secondary border-b-2 border-dotted border-b-style-primary;
 }
 
 .badge-outline {

src/pages/tags/[slug].astro

@@ -0,0 +1,55 @@
+---
+import { getCollection } from 'astro:content'
+import kebabCase from 'lodash.kebabcase'
+
+import LeetCodeDifficulty from '@/components/LeetCodeDifficulty.astro'
+import PostList from '@/components/post/PostList.astro'
+import siteConfig from '@/configs/site'
+import AppLayout from '@/layouts/AppLayout.astro'
+
+export async function getStaticPaths() {
+  const allTags = new Set<string>()
+  const allPosts = await getCollection(
+    'leetcode-solutions',
+    ({ data }) => data.tags?.length > 0
+  )
+  allPosts.forEach((post) =>
+    post.data.tags?.forEach((t: string) => allTags.add(t))
+  )
+
+  return Array.from(allTags).map((tag) => {
+    const slug = kebabCase(tag)
+    const filteredPosts = allPosts.filter((post) =>
+      post.data.tags?.includes(tag)
+    )
+
+    return {
+      params: { slug },
+      props: {
+        posts: filteredPosts,
+        tag,
+      },
+    }
+  })
+}
+
+const { tag, posts } = Astro.props
+const { title, description, author } = siteConfig
+---
+
+<AppLayout
+  title={`${tag} - ${title}`}
+  description={description}
+  author={author.name}
+  headerCssClasses="max-w-xl px-8"
+>
+  <main class="mx-auto my-4 p-4 max-w-xl text-site-header-text">
+    <div class="grid grid-flow-col auto-cols-max gap-2 m-4 justify-center">
+      <h1 class="text-style-primary">
+        Posts by tag:
+        <span class="badge-default mx-2">{tag}</span>
+      </h1>
+    </div>
+    <PostList posts={posts} />
+  </main>
+</AppLayout>