refactor: restructure table components into individual files for better modularity

Author: raymondanythings

apps/landing/src/components/PropsTable.tsx

@@ -4,14 +4,12 @@ import Markdown from 'react-markdown'
 import { _components } from '@/mdx-components'
 
 import { CustomCodeBlock } from './mdx/components/CustomCodeBlock'
-import {
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRoot,
-  TableRow,
-} from './Table'
+import { TableBody } from './TableBody'
+import { TableCell } from './TableCell'
+import { TableHead } from './TableHead'
+import { TableHeaderCell } from './TableHeaderCell'
+import { TableRoot } from './TableRoot'
+import { TableRow } from './TableRow'
 
 interface ComponentProp {
   property: string

apps/landing/src/components/Table.tsx

@@ -0,0 +1,6 @@
+import { Box } from '@devup-ui/react'
+import { ComponentPropsWithoutRef } from 'react'
+
+export const TableBody = ({ ...props }: ComponentPropsWithoutRef<'tbody'>) => {
+  return <Box {...props} as="tbody" />
+}

apps/landing/src/components/TableBody.tsx

@@ -0,0 +1,6 @@
+import { Box } from '@devup-ui/react'
+import { ComponentPropsWithoutRef } from 'react'
+
+export const TableCell = ({ ...props }: ComponentPropsWithoutRef<'th'>) => {
+  return <Box {...props} as="td" padding="0.5rem 1rem" />
+}

apps/landing/src/components/TableCell.tsx

@@ -0,0 +1,16 @@
+import { Box } from '@devup-ui/react'
+import { ComponentPropsWithoutRef } from 'react'
+
+export const TableHead = ({ ...props }: ComponentPropsWithoutRef<'thead'>) => {
+  return (
+    <Box
+      {...props}
+      as="thead"
+      selectors={{
+        '& tr': {
+          bg: '$cardBg',
+        },
+      }}
+    />
+  )
+}

apps/landing/src/components/TableHead.tsx

@@ -0,0 +1,8 @@
+import { Box } from '@devup-ui/react'
+import { ComponentPropsWithoutRef } from 'react'
+
+export const TableHeaderCell = ({
+  ...props
+}: ComponentPropsWithoutRef<'th'>) => {
+  return <Box {...props} as="th" padding="0.5rem 1rem" textAlign="left" />
+}

apps/landing/src/components/TableHeaderCell.tsx

@@ -0,0 +1,10 @@
+import { Box } from '@devup-ui/react'
+import { ComponentPropsWithoutRef } from 'react'
+
+export const TableRoot = ({ ...props }: ComponentPropsWithoutRef<'table'>) => {
+  return (
+    <Box borderRadius="0.5rem" overflow="hidden">
+      <Box {...props} as="table" borderCollapse="collapse" borderSpacing={0} />
+    </Box>
+  )
+}

apps/landing/src/components/TableRoot.tsx

@@ -0,0 +1,17 @@
+import { Box } from '@devup-ui/react'
+import { ComponentPropsWithoutRef } from 'react'
+
+export const TableRow = ({ ...props }: ComponentPropsWithoutRef<'tr'>) => {
+  return (
+    <Box
+      {...props}
+      as="tr"
+      borderBottom="1px solid var(--border, #E4E4E4)"
+      selectors={{
+        '& + &:last-of-type': {
+          borderBottom: 'none',
+        },
+      }}
+    />
+  )
+}