From 2948e2b91d5617647a58981a36d22d4266a48f1f Mon Sep 17 00:00:00 2001
From: Arghya Das <arghyadasproject@gmail.com>
Date: Thu, 2 Jan 2025 23:45:36 +0530
Subject: [PATCH 1/2] feat: changed the mdx table style

---
 components/mdx-components.tsx | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index b3668f9a5..59de55c53 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -1,7 +1,6 @@
 import { useMDXComponent } from "@content-collections/mdx/react";
 import Image from "next/image";
 import Link from "next/link";
-
 import { Callout } from "@/components/callout";
 import RepoDownload from "@/components/repo-download";
 import TechStack from "@/components/tech-stack";
@@ -16,7 +15,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Event } from "@/lib/events";
 import { cn } from "@/lib/utils";
 import TweetCard from "@/registry/default/magicui/tweet-card";
-
 import { ComponentPreview } from "./component-preview";
 import { ComponentSource } from "./component-source";
 import { CopyButton, CopyNpmCommandButton } from "./copy-button";
@@ -134,17 +132,38 @@ const components = {
     />
   ),
   table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
-    <div className="my-6 w-full overflow-y-auto">
-      <table className={cn("w-full", className)} {...props} />
+    <div className="table-container my-6 w-full overflow-y-auto rounded-lg border border-border">
+      <table
+        className={cn("table-container my-0 w-full overflow-hidden", className)}
+        {...props}
+      />
     </div>
   ),
+  thead: ({
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+    <thead
+      className={cn(
+        "border-b last:border-b-0 odd:bg-background even:bg-background/50",
+        className,
+      )}
+      {...props}
+    />
+  ),
   tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
-    <tr className={cn("m-0 border-t p-0", className)} {...props} />
+    <tr
+      className={cn(
+        "border-b last:border-b-0 odd:bg-background even:bg-background/50",
+        className,
+      )}
+      {...props}
+    />
   ),
   th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <th
       className={cn(
-        "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+        "text-balance border-r border-border bg-neutral-50 px-6 py-3 text-left font-mono text-sm font-semibold tracking-tight text-secondary-foreground last:border-r-0 dark:bg-neutral-900",
         className,
       )}
       {...props}
@@ -153,7 +172,7 @@ const components = {
   td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <td
       className={cn(
-        "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+        "border-r border-border px-6 py-4 text-sm text-secondary-foreground last:border-r-0 [&[align=center]]:text-center [&[align=right]]:text-right",
         className,
       )}
       {...props}

From 4f94d4520518dabd8e59b9de0cb95f4dc75da4a9 Mon Sep 17 00:00:00 2001
From: Dillion Verma <hello@dillion.io>
Date: Thu, 2 Jan 2025 17:00:23 -0500
Subject: [PATCH 2/2] fix: update style

---
 components/mdx-components.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index 59de55c53..082da0aad 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -1,6 +1,3 @@
-import { useMDXComponent } from "@content-collections/mdx/react";
-import Image from "next/image";
-import Link from "next/link";
 import { Callout } from "@/components/callout";
 import RepoDownload from "@/components/repo-download";
 import TechStack from "@/components/tech-stack";
@@ -15,6 +12,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Event } from "@/lib/events";
 import { cn } from "@/lib/utils";
 import TweetCard from "@/registry/default/magicui/tweet-card";
+import { useMDXComponent } from "@content-collections/mdx/react";
+import Image from "next/image";
+import Link from "next/link";
 import { ComponentPreview } from "./component-preview";
 import { ComponentSource } from "./component-source";
 import { CopyButton, CopyNpmCommandButton } from "./copy-button";
@@ -132,9 +132,9 @@ const components = {
     />
   ),
   table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
-    <div className="table-container my-6 w-full overflow-y-auto rounded-lg border border-border">
+    <div className="my-6 w-full overflow-y-auto rounded-lg border border-border">
       <table
-        className={cn("table-container my-0 w-full overflow-hidden", className)}
+        className={cn("my-0 w-full overflow-hidden", className)}
         {...props}
       />
     </div>
@@ -163,7 +163,7 @@ const components = {
   th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <th
       className={cn(
-        "text-balance border-r border-border bg-neutral-50 px-6 py-3 text-left font-mono text-sm font-semibold tracking-tight text-secondary-foreground last:border-r-0 dark:bg-neutral-900",
+        "text-balance border-r border-border bg-neutral-50 px-6 py-3 text-left font-mono text-sm font-semibold tracking-tight text-secondary-foreground last:border-r-0 dark:bg-neutral-950",
         className,
       )}
       {...props}