refactor: consolidate table components into a single Table component and update PropsTable accordingly

Author: raymondanythings

apps/landing/src/components/PropsTable.tsx

@@ -4,12 +4,14 @@ import Markdown from 'react-markdown'
 import { _components } from '@/mdx-components'
 
 import { CustomCodeBlock } from './mdx/components/CustomCodeBlock'
-import { TableBody } from './TableBody'
-import { TableCell } from './TableCell'
-import { TableHead } from './TableHead'
-import { TableHeaderCell } from './TableHeaderCell'
-import { TableRoot } from './TableRoot'
-import { TableRow } from './TableRow'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from './mdx/components/Table'
 
 interface ComponentProp {
   property: string
@@ -39,7 +41,7 @@ export const PropsTable = async (props: PropTableProps) => {
   const { componentProps } = props
 
   return (
-    <TableRoot border={0}>
+    <Table border={0}>
       <TableHead>
         <TableRow>
           <TableHeaderCell>Prop</TableHeaderCell>
@@ -83,6 +85,6 @@ export const PropsTable = async (props: PropTableProps) => {
           ),
         )}
       </TableBody>
-    </TableRoot>
+    </Table>
   )
 }

apps/landing/src/components/TableBody.tsx

@@ -4,7 +4,7 @@ export function CustomCodeBlock({ children }: { children: string }) {
   return (
     <Box
       as="code"
-      bg="var(--containerBackground)"
+      bg="$containerBackground"
       borderRadius="0.25rem"
       color="var(--text)"
       padding="0.25rem"

apps/landing/src/components/TableCell.tsx

@@ -0,0 +1,51 @@
+import { Box } from '@devup-ui/react'
+import { type ComponentProps } from 'react'
+
+export const Table = ({ ...props }: ComponentProps<'table'>) => {
+  return (
+    <Box borderRadius="0.5rem" overflow="hidden">
+      <Box {...props} as="table" borderCollapse="collapse" borderSpacing={0} />
+    </Box>
+  )
+}
+
+export const TableBody = ({ ...props }: ComponentProps<'tbody'>) => {
+  return <Box {...props} as="tbody" />
+}
+
+export const TableCell = ({ ...props }: ComponentProps<'th'>) => {
+  return <Box {...props} as="td" padding="0.5rem 1rem" />
+}
+
+export const TableHead = ({ ...props }: ComponentProps<'thead'>) => {
+  return (
+    <Box
+      {...props}
+      as="thead"
+      selectors={{
+        '& tr': {
+          bg: '$cardBg',
+        },
+      }}
+    />
+  )
+}
+
+export const TableHeaderCell = ({ ...props }: ComponentProps<'th'>) => {
+  return <Box {...props} as="th" padding="0.5rem 1rem" textAlign="left" />
+}
+
+export const TableRow = ({ ...props }: ComponentProps<'tr'>) => {
+  return (
+    <Box
+      {...props}
+      as="tr"
+      borderBottom="1px solid var(--border, #E4E4E4)"
+      selectors={{
+        '& + &:last-of-type': {
+          borderBottom: 'none',
+        },
+      }}
+    />
+  )
+}