reuse table styles from docs in blog (#752)

.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

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   |       |

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
 }
 

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,

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'

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}
+  />
+)

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}
+  />
+)

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}
+  />
+)