feat(blog): use responsive table in mdx blog

src/components/blog/Table.astro

@@ -0,0 +1,9 @@
+---
+
+---
+
+<div class="mb-4 min-w-full overflow-x-auto">
+	<table class="my-2 min-w-full whitespace-nowrap text-sm">
+		<slot />
+	</table>
+</div>

src/components/layout/Header.astro

@@ -70,7 +70,7 @@ const navLinks = [
 							class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
 							<div
 								role="button"
-								class="w-full gap-2 rounded-lg pr-4 text-start leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
+								class="text- w-full gap-2 rounded-lg px-4 leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
 								{label}
 							</div>
 						</a>

src/pages/blog/[...slug].astro

@@ -2,6 +2,7 @@
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import BaseLayout from '@/layouts/BaseLayout.astro';
+import Table from '@/components/blog/Table.astro';
 
 export async function getStaticPaths() {
 	const blogEntries = await getCollection('blog');
@@ -17,13 +18,14 @@ interface Props {
 
 const { entry } = Astro.props as Props;
 const { Content } = await entry.render();
+const components = { table: Table };
 const { title } = entry.data;
 ---
 
 <BaseLayout>
 	<div
-		class="container prose mx-auto space-y-16 px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl">
+		class="prose dark:prose-invert container mx-auto space-y-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
 		<h1 class="text-4xl font-bold">{title}</h1>
-		<Content />
+		<Content components={components} />
 	</div>
 </BaseLayout>