Use mdx table

Author: forestream

apps/landing/src/app/(detail)/components/MdxCard.tsx

@@ -48,7 +48,6 @@ export default async function MdxCard({
         border: '1px solid $border',
         bg: '$containerBackground',
         maxWidth: '100%',
-        minWidth: '300px',
         flexShrink: 0,
         cursor: 'default',
         marginBottom: '20px',

apps/landing/src/app/(detail)/components/button/Api.mdx

@@ -1,75 +1,13 @@
-import { Td, Th, Tr, Table } from '../Table'
-
-
 ###### API
 `Button` props extends the button HTML attributes. 
-<div style={{ overflow: 'auto', width: '100%' }}>
-<Table style={{width: '100%'}}>
-<thead>
-<Tr>
-<Th>Property</Th>
-<Th>Description</Th>
-<Th>Type</Th>
-<Th>Default</Th>
-</Tr>
-</thead>
-<tbody>
-<Tr>
-<Td>variant</Td>
-<Td>The variant of the button</Td>
-<Td>`'primary' | 'default'`</Td>
-<Td>`'default'`</Td>
-</Tr>
-<Tr>
-<Td>colors</Td>
-<Td>The color variables of the button, i.e. `var(--primary)`</Td>
-<Td>
-```
-{ 
-   primary?: string
-   error?: string
-   text?: string
-   border?: string
-   inputBackground?: string
-   primaryFocus?: string
-}
-```
-</Td>
-<Td>`undefined`</Td>
-</Tr>
-<Tr>
-<Td>danger</Td>
-<Td>Signals that it should be used with caution. It is often used in a delete button or to show the error status.</Td>
-<Td>`boolean`</Td>
-<Td>`false`</Td>
-</Tr>
-<Tr>
-<Td>size</Td>
-<Td>The size of the button</Td>
-<Td>`'sm' | 'md' | 'lg'`</Td>
-<Td>`'md'`</Td>
-</Tr>
-<Tr>
-<Td>icon</Td>
-<Td>Icon of the button passed in as a form of ReactNode</Td>
-<Td>`React.ReactNode`</Td>
-<Td>`undefined`</Td>
-</Tr>
-<Tr>
-<Td>ellipsis</Td>
-<Td>
-Whether the button text should be truncated with an ellipsis. The
-button should have a width to be able to truncate the text.
-</Td>
-<Td>`boolean`</Td>
-<Td>`false`</Td>
-</Tr>
-</tbody>
-</Table>
-</div>
 
-## aa
-
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |
+<div style={{ width: '100%', overflow: 'auto'}}>
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| **variant** | The variant of the button | `'primary' \| 'default'` | `'default'` |
+| **colors** | The color variables of the button, i.e. `var(--primary)` | ```{<br>  primary?: string<br>  error?: string<br>  text?: string<br>  border?: string<br>  inputBackground?: string<br>  primaryFocus?: string<br>}``` | `undefined` |
+| **danger** | Signals that it should be used with caution. It is often used in a delete button or to show the error status. | `boolean` | `false` |
+| **size** | The size of the button | `'sm' \| 'md' \| 'lg'` | `'md'` |
+| **icon** | Icon of the button passed in as a form of ReactNode | `React.ReactNode` | `undefined` |
+| **ellipsis** | Whether the button text should be truncated with an ellipsis. The button should have a width to be able to truncate the text. | `boolean` | `false` |
+</div>

apps/landing/src/app/(detail)/components/button/Examples.mdx

@@ -11,12 +11,12 @@ import { Colors } from './demo/Colors'
 ###### Examples
 
 <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
-    <section style={{ flex: '1', maxWidth: 'calc(50% - 8px)' }}>
+    <section style={{ flex: '1', minWidth: '300px', width: 'calc(50% - 8px)' }}>
       <MdxCard src="button/demo/Variants.tsx" demo={<Variants />} />
       <MdxCard src="button/demo/Danger.tsx" demo={<Danger />} />
       <MdxCard src="button/demo/Disabled.tsx" demo={<Disabled />} />
     </section>
-    <section style={{ flex: '1', maxWidth: 'calc(50% - 8px)' }}>
+    <section style={{ flex: '1', minWidth: '300px', width: 'calc(50% - 8px)' }}>
       <MdxCard src="button/demo/Icon.tsx" demo={<Icon />} />
       <MdxCard src="button/demo/Colors.tsx" demo={<Colors />} />
     </section>

apps/landing/src/app/(detail)/components/button/page.tsx

@@ -48,10 +48,10 @@ function CustomPre({ children }: { children: React.ReactNode }) {
   )
 }
 
-function CustomCode({ children }: { children: React.ReactNode }) {
+function CustomCode({ children }: { children: string }) {
   return (
-    <Box as="code" color="$primary">
-      {children}
+    <Box as="code" color="$primary" whiteSpace="pre-wrap">
+      {children.replaceAll('<br>', '\n')}
     </Box>
   )
 }

apps/landing/src/mdx-components.tsx

@@ -49,6 +49,74 @@ export const _components = {
   pre({ children }: { children: React.ReactNode }) {
     return <Box as="pre">{children}</Box>
   },
+  table({ children }: { children: React.ReactNode }) {
+    return (
+      <Box
+        as="table"
+        border="none"
+        maxW="100%"
+        minW="600px"
+        selectors={{
+          '& thead, & tbody': {
+            border: 'none',
+          },
+        }}
+        typography="bodyBold"
+      >
+        {children}
+      </Box>
+    )
+  },
+  thead({ children }: { children: React.ReactNode }) {
+    return (
+      <Text
+        as="thead"
+        bg="$cardBg"
+        border="none"
+        color="$captionBold"
+        m="0"
+        textAlign="left"
+        typography="bodyReg"
+      >
+        {children}
+      </Text>
+    )
+  },
+  th({ children }: { children: React.ReactNode }) {
+    return (
+      <Text as="th" border="none" color="$captionBold" m="0">
+        {children}
+      </Text>
+    )
+  },
+  tr({ children }: { children: React.ReactNode }) {
+    return (
+      <Text
+        as="tr"
+        borderBottom="1px solid $border"
+        borderTop="1px solid $border"
+        color="$text"
+        m="0"
+        typography="body"
+      >
+        {children}
+      </Text>
+    )
+  },
+  td({ children }: { children: React.ReactNode }) {
+    return (
+      <Text
+        as="td"
+        border="none"
+        color="$text"
+        m="0"
+        typography="body"
+        whiteSpace="pre-wrap"
+      >
+        {children}
+      </Text>
+    )
+  },
 }
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {