Added table support for markdown component

src/components/Markdown.js

@@ -11,6 +11,7 @@ function Heading({ level, ...props }) {
   return (
     <Text
       mt={2}
+      mb={1}
       as={`h${level}`}
       sx={{ fontSize }}
       variant="heading"
@@ -36,6 +37,62 @@ function Code({ children, value }) {
   );
 }
 
+function Table({ children }) {
+  return (
+    <Text
+      as="table"
+      my={4}
+      style={{ borderCollapse: "collapse", width: "100%" }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function TableHead(props) {
+  return (
+    <Text
+      as="thead"
+      variant="heading"
+      sx={{ textAlign: "left", "& > tr": { borderBottomWidth: "2px" } }}
+      {...props}
+    />
+  );
+}
+
+function TableBody(props) {
+  return (
+    <Text
+      as="tbody"
+      variant="body2"
+      sx={{ borderBottomWidth: "1px", "& > tr": { borderBottomWidth: "1px" } }}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ children }) {
+  return (
+    <Text
+      as="tr"
+      sx={{
+        borderBottomStyle: "solid",
+        borderBottomColor: "border",
+      }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function TableCell({ children }) {
+  return (
+    <Text as="td" p={2}>
+      {children}
+    </Text>
+  );
+}
+
 function Markdown({ source }) {
   const renderers = {
     paragraph: Paragraph,
@@ -44,6 +101,11 @@ function Markdown({ source }) {
     link: Link,
     listItem: ListItem,
     inlineCode: Code,
+    table: Table,
+    tableHead: TableHead,
+    tableBody: TableBody,
+    tableRow: TableRow,
+    tableCell: TableCell,
   };
   return <ReactMarkdown source={source} renderers={renderers} />;
 }

src/theme.js

@@ -9,6 +9,7 @@ export default {
     muted: "hsla(230, 20%, 0%, 20%)",
     gray: "hsl(0, 0%, 70%)",
     overlay: "hsla(230, 25%, 18%, 0.8)",
+    border: "hsla(210, 50%, 96%, 0.5)",
     modes: {
       light: {
         text: "hsl(10, 20%, 20%)",
@@ -18,6 +19,7 @@ export default {
         highlight: "hsl(260, 20%, 40%)",
         muted: "hsla(230, 20%, 60%, 20%)",
         overlay: "hsla(230, 100%, 97%, 0.8)",
+        border: "hsla(10, 20%, 20%, 0.5)",
       },
     },
   },
@@ -133,28 +135,6 @@ export default {
       color: "secondary",
       bg: "muted",
     },
-    table: {
-      width: "100%",
-      my: 4,
-      borderCollapse: "separate",
-      borderSpacing: 0,
-      "th,td": {
-        textAlign: "left",
-        py: "4px",
-        pr: "4px",
-        pl: 0,
-        borderColor: "muted",
-        borderBottomStyle: "solid",
-      },
-    },
-    th: {
-      verticalAlign: "bottom",
-      borderBottomWidth: "2px",
-    },
-    td: {
-      verticalAlign: "top",
-      borderBottomWidth: "1px",
-    },
     hr: {
       border: 0,
       borderBottom: "1px solid",