From e0f65256cd7eb3922ab402bfadd4799d90682ad3 Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Sun, 3 Mar 2024 18:21:14 +0100
Subject: [PATCH] feat(blog): use responsive table in mdx blog

---
 src/components/blog/Table.astro    | 9 +++++++++
 src/components/layout/Header.astro | 2 +-
 src/pages/blog/[...slug].astro     | 6 ++++--
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 src/components/blog/Table.astro

diff --git a/src/components/blog/Table.astro b/src/components/blog/Table.astro
new file mode 100644
index 0000000..f1aaa4d
--- /dev/null
+++ b/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>
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index d521aaa..3642ed9 100644
--- a/src/components/layout/Header.astro
+++ b/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>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 59e5c1b..6714b35 100644
--- a/src/pages/blog/[...slug].astro
+++ b/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>