From 6135f2aecc42c5ab2d0d39236fecf99678328a65 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Fri, 28 Feb 2025 02:01:41 -0600
Subject: [PATCH] feat: improve blog post markdown table styling and
 responsiveness

---
 .../website/app/[locale]/blog/[slug]/page.tsx | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/apps/website/app/[locale]/blog/[slug]/page.tsx b/apps/website/app/[locale]/blog/[slug]/page.tsx
index 93589ec..0f4345f 100644
--- a/apps/website/app/[locale]/blog/[slug]/page.tsx
+++ b/apps/website/app/[locale]/blog/[slug]/page.tsx
@@ -113,6 +113,26 @@ export default async function BlogPostPage({ params }: Props) {
 				{...props}
 			/>
 		),
+		table: ({ node, ...props }) => (
+			<div className="my-6 w-full overflow-x-auto border rounded-lg">
+				<table className="w-full border-collapse" {...props} />
+			</div>
+		),
+		thead: ({ node, ...props }) => (
+			<thead className="bg-muted border-b border-border" {...props} />
+		),
+		tbody: ({ node, ...props }) => (
+			<tbody className="divide-y divide-border" {...props} />
+		),
+		tr: ({ node, ...props }) => (
+			<tr className="transition-colors hover:bg-muted/50" {...props} />
+		),
+		th: ({ node, ...props }) => (
+			<th className="p-4 text-left font-semibold" {...props} />
+		),
+		td: ({ node, ...props }) => (
+			<td className="p-4 text-muted-foreground" {...props} />
+		),
 		img: ({ node, src, alt }) => (
 			<div className="relative w-full h-64 my-6 rounded-lg overflow-hidden">
 				{src && <ZoomableImage src={src} alt={alt || ""} />}