trying this

src/pages/blog/tags/[id].astro

@@ -0,0 +1,39 @@
+---
+import Layout from "~/layouts/Page.astro";
+import { getCollection } from "astro:content";
+
+export async function getStaticPaths() {
+	const allPosts = await getCollection("blog");
+	const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
+	return tags.map((tag) => ({
+		params: { id: tag },
+		props: { tag },
+	}));
+}
+
+const allPosts = await getCollection("blog");
+const { tag } = Astro.props;
+const filteredPosts = allPosts.filter(
+	(post) => post.data.tags && post.data.tags.includes(tag as string)
+);
+---
+
+<Layout
+	title={`Posts tagged with "${tag}"`}
+	description={`A collection of posts tagged with "${tag}"`}
+>
+	<ul class="fa-ul">
+		{
+			filteredPosts.length > 0 ? (
+				filteredPosts.map((post) => (
+					<li>
+						<i class="fa-li fa-solid fa-file-alt" />
+						<a href={`/blog/${post.id}`}>{post.data.title}</a>
+					</li>
+				))
+			) : (
+				<li>No posts found for this tag.</li>
+			)
+		}
+	</ul>
+</Layout>

src/pages/blog/tags/index.astro

@@ -0,0 +1,18 @@
+---
+import Layout from "~/layouts/Page.astro";
+import { getCollection } from "astro:content";
+
+const allPosts = await getCollection("blog");
+const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
+---
+
+<Layout title="Tags" description="">
+    <ul class="fa-ul">
+        {
+            tags.map((tag) => <li>
+                <i class="fa-li fa-solid fa-hashtag"></i>
+                <a href={`/blog/tags/${tag}`}>{tag}</a>
+            </li>)
+        }
+    </ul>
+</Layout>