Merge pull request #84 from ethereum/md-table

feat: add markdown table component [Fixes #35]

src/components/Table.tsx

@@ -0,0 +1,11 @@
+import {
+  Table as ChakraTable,
+  TableContainer,
+  type ThemingProps,
+} from '@chakra-ui/react'
+
+export const Table = ({ variant, ...props }: ThemingProps<'Table'>) => (
+  <TableContainer whiteSpace="normal" mb="4">
+    <ChakraTable variant={variant} {...props} />
+  </TableContainer>
+)

src/components/index.ts

@@ -31,6 +31,7 @@ export * from './Section'
 export * from './ShowcaseSection'
 export * from './SocialLinks'
 export * from './SolidityLogo'
+export * from './Table'
 export * from './Triangle'
 export * from './Triangles'
 export * from './YouTube'

src/styles/MDStyles.tsx

@@ -1,14 +1,18 @@
 import {
-  Box,
   Divider,
-  Flex,
   Heading,
   Image,
   Stack,
-  Table,
+  Tbody,
+  Td,
   Text,
+  Th,
+  Thead,
+  type ThemingProps,
+  Tr,
 } from '@chakra-ui/react'
-import { Code, Link } from '@/components'
+import { Code, Link, Table } from '@/components'
+
 // TODO: Debug tables
 
 export const MDStyles = {
@@ -87,4 +91,10 @@ export const MDStyles = {
   hr: ({ children }: any) => {
     return <Divider my={6}>{children}</Divider>
   },
+  table: (props: ThemingProps<'Table'>) => <Table {...props} />,
+  thead: Thead,
+  th: Th,
+  tbody: Tbody,
+  tr: Tr,
+  td: Td,
 }