From 1ee3c9243c7478532c461c4e52ccfd01cac64543 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Mon, 29 Aug 2022 16:44:27 +0300
Subject: [PATCH] reuse table styles from docs in blog (#752)

---
 .changeset/eleven-drinks-deny.md              |  7 +++++
 examples/blog/pages/posts/table.mdx           | 15 +++++++++++
 packages/nextra-theme-blog/src/mdx-theme.tsx  |  8 +++++-
 .../nextra-theme-docs/src/mdx-components.tsx  | 26 +++----------------
 packages/nextra/src/components/index.ts       |  3 +++
 packages/nextra/src/components/td.tsx         |  8 ++++++
 packages/nextra/src/components/th.tsx         |  8 ++++++
 packages/nextra/src/components/tr.tsx         | 11 ++++++++
 8 files changed, 63 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/eleven-drinks-deny.md
 create mode 100644 examples/blog/pages/posts/table.mdx
 create mode 100644 packages/nextra/src/components/td.tsx
 create mode 100644 packages/nextra/src/components/th.tsx
 create mode 100644 packages/nextra/src/components/tr.tsx

diff --git a/.changeset/eleven-drinks-deny.md b/.changeset/eleven-drinks-deny.md
new file mode 100644
index 0000000000..fe9861c05b
--- /dev/null
+++ b/.changeset/eleven-drinks-deny.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+reuse table styles from docs in blog
diff --git a/examples/blog/pages/posts/table.mdx b/examples/blog/pages/posts/table.mdx
new file mode 100644
index 0000000000..68f0977091
--- /dev/null
+++ b/examples/blog/pages/posts/table.mdx
@@ -0,0 +1,15 @@
+---
+title: Table
+date: 2022/8/28
+description: En example of using table.
+tag: web development
+author: Dimitri POSTOLOV
+---
+
+## Test table
+
+| Left | Center | Right |
+| ---- | :----: | ----: |
+| ss2  |  333   |  3232 |
+|      |  222   |  3232 |
+|      |   23   |       |
diff --git a/packages/nextra-theme-blog/src/mdx-theme.tsx b/packages/nextra-theme-blog/src/mdx-theme.tsx
index 62c83f3d06..a340141bac 100644
--- a/packages/nextra-theme-blog/src/mdx-theme.tsx
+++ b/packages/nextra-theme-blog/src/mdx-theme.tsx
@@ -10,7 +10,7 @@ import React, {
 import { MDXProvider } from '@mdx-js/react'
 import Link from 'next/link'
 import ReactDOM from 'react-dom'
-import { Code, Pre } from 'nextra/components'
+import { Code, Pre, Td, Th, Tr } from 'nextra/components'
 import { useBlogContext } from './blog-context'
 
 export const HeadingContext = createContext<
@@ -87,6 +87,12 @@ const components = {
       </div>
     )
   },
+  tr: Tr,
+  th: Th,
+  td: Td,
+  table(props: ComponentProps<'table'>) {
+    return <table className="not-prose" {...props} />
+  },
   code: Code
 }
 
diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
index 6cd3b55155..ba7396c57d 100644
--- a/packages/nextra-theme-docs/src/mdx-components.tsx
+++ b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -14,7 +14,7 @@ import { Collapse, Anchor } from './components'
 import { IS_BROWSER } from './constants'
 import cn from 'clsx'
 import { DocsThemeConfig } from './types'
-import { Pre, Code } from 'nextra/components'
+import { Code, Pre, Td, Th, Tr } from 'nextra/components'
 
 let observer: IntersectionObserver
 let setActiveAnchor: ReturnType<typeof useSetActiveAnchor>
@@ -263,27 +263,9 @@ export const getComponents = ({
     p: (props: ComponentProps<'p'>) => (
       <p className="mt-6 first:mt-0 leading-7" {...props} />
     ),
-    tr: (props: ComponentProps<'tr'>) => (
-      <tr
-        className={cn(
-          'm-0 border-t border-gray-300 p-0 dark:border-gray-600',
-          'even:bg-gray-100 even:dark:bg-gray-600/20'
-        )}
-        {...props}
-      />
-    ),
-    th: (props: ComponentProps<'th'>) => (
-      <th
-        className="m-0 border border-gray-300 px-4 py-2 dark:border-gray-600 font-semibold"
-        {...props}
-      />
-    ),
-    td: (props: ComponentProps<'td'>) => (
-      <td
-        className="m-0 border border-gray-300 px-4 py-2 dark:border-gray-600"
-        {...props}
-      />
-    ),
+    tr: Tr,
+    th: Th,
+    td: Td,
     details: Details,
     summary: Summary,
     pre: Pre,
diff --git a/packages/nextra/src/components/index.ts b/packages/nextra/src/components/index.ts
index 01a3b1fb10..665fac60ba 100644
--- a/packages/nextra/src/components/index.ts
+++ b/packages/nextra/src/components/index.ts
@@ -1,3 +1,6 @@
 export { CopyToClipboard } from './copy-to-clipboard'
 export { Code } from './code'
 export { Pre } from './pre'
+export { Td } from './td'
+export { Th } from './th'
+export { Tr } from './tr'
diff --git a/packages/nextra/src/components/td.tsx b/packages/nextra/src/components/td.tsx
new file mode 100644
index 0000000000..f85c7ac538
--- /dev/null
+++ b/packages/nextra/src/components/td.tsx
@@ -0,0 +1,8 @@
+import React, { ComponentProps } from 'react'
+
+export const Td = (props: ComponentProps<'td'>) => (
+  <td
+    className="m-0 border border-gray-300 px-4 py-2 dark:border-gray-600"
+    {...props}
+  />
+)
diff --git a/packages/nextra/src/components/th.tsx b/packages/nextra/src/components/th.tsx
new file mode 100644
index 0000000000..477e5eea3f
--- /dev/null
+++ b/packages/nextra/src/components/th.tsx
@@ -0,0 +1,8 @@
+import React, { ComponentProps } from 'react'
+
+export const Th = (props: ComponentProps<'th'>) => (
+  <th
+    className="m-0 border border-gray-300 px-4 py-2 dark:border-gray-600 font-semibold"
+    {...props}
+  />
+)
diff --git a/packages/nextra/src/components/tr.tsx b/packages/nextra/src/components/tr.tsx
new file mode 100644
index 0000000000..2e3db11a49
--- /dev/null
+++ b/packages/nextra/src/components/tr.tsx
@@ -0,0 +1,11 @@
+import React, { ComponentProps } from 'react'
+
+export const Tr = (props: ComponentProps<'tr'>) => (
+  <tr
+    className={
+      'm-0 border-t border-gray-300 p-0 dark:border-gray-600 ' +
+      'even:bg-gray-100 even:dark:bg-gray-600/20'
+    }
+    {...props}
+  />
+)