docs(website/mdx-components): create table component for toast page (c…

…hakra-ui#1310)

website/components/mdx-components.tsx

@@ -126,6 +126,44 @@ const components: Record<string, FC<any>> = {
   ContextTable(props) {
     return <PropTable type="context" {...props} />
   },
+  DefaultValuesTable: ({
+    tableData,
+  }: {
+    tableData: {
+      headings: string[]
+      data: Array<[string, string]>
+    }
+  }) => {
+    const { data, headings } = tableData
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            {headings.map((heading) => (
+              <th key={heading}>{heading}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map(([prop, value], idx) => (
+            <tr key={idx}>
+              <td>
+                <chakra.code className="prose" layerStyle="inlineCode">
+                  {prop}
+                </chakra.code>
+              </td>
+              <td>
+                <chakra.code fontSize="sm" whiteSpace="pre-wrap">
+                  {value}
+                </chakra.code>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    )
+  },
   code(props) {
     if (typeof props.children === "string") {
       return <components.inlineCode {...props} />

website/data/components/toast.mdx

@@ -103,15 +103,20 @@ The options you can pass in are:
 ## Setting custom duration
 
 Every toast has a default visible duration depending on the `type` set. Here's
-the table showing the toast type and duration.
-
-| type      | duration   |
-| --------- | ---------- |
-| `info`    | `5000`     |
-| `error`   | `5000`     |
-| `success` | `2000`     |
-| `custom`  | `5000`     |
-| `loading` | `Infinity` |
+the following toast types and matching default durations:
+
+<DefaultValuesTable 
+  tableData={{
+    headings: ['type', 'duration'],
+    data: [
+      ['info', '5000'],
+      ['error', '5000'],
+      ['success', '2000'],
+      ['custom', '5000'],
+      ['loading', 'Infinity'],
+    ]
+  }}
+/>
 
 You can override the duration of the toast by passing the `duration` property to
 the `toast.create(...)` function.