2 files changed, 88 insertions, 0 deletions
diff --git a/src/pages/types/[...id].astro b/src/pages/types/[...id].astro
new file mode 100644
index 0000000..26640a9
--- /dev/null
+++ b/src/pages/types/[...id].astro
@@ -0,0 +1,53 @@
+---
+import Breadcrumbs from '@/components/Breadcrumbs.astro'
+import PageHead from '@/components/PageHead.astro'
+import Layout from '@/layouts/Layout.astro'
+import { getAllTypes, getEventsByType } from '@/lib/data-utils'
+import { capitalizeFirstLetter, iconMappings } from '@/lib/utils'
+import EventCard from '../../components/EventCard.astro'
+
+export async function getStaticPaths() {
+  const typeMap = await getAllTypes()
+  const uniqueTags = Array.from(typeMap.keys())
+
+  return Promise.all(
+    uniqueTags.map(async (type) => {
+      const events = await getEventsByType(type)
+      return {
+        params: { id: type },
+        props: {
+          type,
+          events,
+        },
+      }
+    }),
+  )
+}
+
+const { type, events } = Astro.props
+---
+
+<Layout class="max-w-3xl">
+  <PageHead
+    slot="head"
+    title={`${capitalizeFirstLetter(type)} Events`}
+    description={`A collection of ${type} events.`}
+    noindex
+  />
+  <Breadcrumbs
+    items={[
+      { href: '/types', label: 'Event types', icon: 'lucide:calendar' },
+      { label: type, icon: iconMappings[type] || 'lucide:ticket' },
+    ]}
+  />
+
+  <ul class="flex flex-col gap-y-4">
+    {
+      events.map((event) => (
+        <li>
+          <EventCard entry={event} />
+        </li>
+      ))
+    }
+  </ul>
+</Layout>
diff --git a/src/pages/types/index.astro b/src/pages/types/index.astro
new file mode 100644
index 0000000..c269c22
--- /dev/null
+++ b/src/pages/types/index.astro
@@ -0,0 +1,35 @@
+---
+import Breadcrumbs from '@/components/Breadcrumbs.astro'
+import Link from '@/components/Link.astro'
+import PageHead from '@/components/PageHead.astro'
+import { badgeVariants } from '@/components/ui/badge'
+import Layout from '@/layouts/Layout.astro'
+import { getAllTypes } from '@/lib/data-utils'
+import { iconMappings } from '@/lib/utils'
+import { Icon } from 'astro-icon/components'
+
+const types = await getAllTypes()
+---
+
+<Layout class="max-w-3xl">
+  <PageHead slot="head" title="Tags" />
+  <Breadcrumbs items={[{ label: 'Tags', icon: 'lucide:tags' }]} />
+
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-wrap gap-2">
+      {console.log([...types.entries()].map((a) => console.log(a)))}
+      {
+        [...types.entries()].map(([type, count]) => (
+          <Link
+            href={`/types/${type}`}
+            class={badgeVariants({ variant: 'muted' })}
+          >
+            <Icon name={iconMappings[type] || 'lucide:hash'} class="size-3" />
+            {type}
+            <span class="text-muted-foreground ml-1.5">({count})</span>
+          </Link>
+        ))
+      }
+    </div>
+  </div>
+</Layout>