chore: use monorepo organization

packages/admin-ui/src/components/table/EditCell.jsx

@@ -0,0 +1,17 @@
+import React, { memo } from 'react'
+
+import { Link } from 'src/components/buttons'
+import { TableCell as Td } from 'src/components/table'
+
+const EditCell = memo(({ save, cancel }) => (
+  <Td>
+    <Link style={{ marginRight: '20px' }} color="secondary" onClick={cancel}>
+      Cancel
+    </Link>
+    <Link color="primary" onClick={save}>
+      Save
+    </Link>
+  </Td>
+))
+
+export default EditCell

packages/admin-ui/src/components/table/EmptyTable.jsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames'
+import React, { memo } from 'react'
+import { H4 } from 'src/components/typography'
+import EmptyTableIcon from 'src/styling/icons/table/empty-table.svg?react'
+
+const EmptyTable = memo(({ message, className }) => {
+  return (
+    <div
+      className={classNames(
+        className,
+        'flex flex-col items-center w-full mt-13 text-sm font-bold font-museo'
+      )}>
+      <EmptyTableIcon />
+      <H4>{message}</H4>
+    </div>
+  )
+})
+
+export default EmptyTable

packages/admin-ui/src/components/table/Table.jsx

@@ -0,0 +1,17 @@
+import classnames from 'classnames'
+import React, { memo } from 'react'
+
+const Table = memo(({ className, children, ...props }) => {
+  return (
+    <table
+      {...props}
+      className={classnames(
+        'table-fixed border-separate border-spacing-0',
+        className
+      )}>
+      {children}
+    </table>
+  )
+})
+
+export default Table

packages/admin-ui/src/components/table/Table.module.css

@@ -0,0 +1,3 @@
+.tableCell {
+  padding: 0 6px;
+}

packages/admin-ui/src/components/table/TableBody.jsx

@@ -0,0 +1,7 @@
+import React, { memo } from 'react'
+
+const TableBody = memo(({ children, ...props }) => (
+  <tbody {...props}>{children}</tbody>
+))
+
+export default TableBody

packages/admin-ui/src/components/table/TableCell.jsx

@@ -0,0 +1,24 @@
+import classnames from 'classnames'
+import React, { memo } from 'react'
+
+import classes from './Table.module.css'
+
+const TableCell = memo(
+  ({ colspan, rightAlign, className, children, ...props }) => {
+    const styles = {
+      [classes.tableCell]: true,
+      'text-right': rightAlign
+    }
+
+    return (
+      <td
+        colSpan={colspan}
+        className={classnames(className, styles)}
+        {...props}>
+        {children}
+      </td>
+    )
+  }
+)
+
+export default TableCell

packages/admin-ui/src/components/table/TableHead.jsx

@@ -0,0 +1,7 @@
+import React, { memo } from 'react'
+
+const TableHead = memo(({ children, ...props }) => (
+  <thead {...props}>{children}</thead>
+))
+
+export default TableHead

packages/admin-ui/src/components/table/TableHeader.jsx

@@ -0,0 +1,19 @@
+import classnames from 'classnames'
+import React, { memo } from 'react'
+
+const TableHeaderCell = memo(
+  ({ rightAlign, children, className, ...props }) => {
+    const styles = {
+      'bg-zodiac text-white py-0 px-6 h-8 text-sm text-left': true,
+      'text-right': rightAlign
+    }
+
+    return (
+      <th {...props} className={classnames(styles, className)}>
+        {children}
+      </th>
+    )
+  }
+)
+
+export default TableHeaderCell

packages/admin-ui/src/components/table/TableRow.jsx

@@ -0,0 +1,22 @@
+import classnames from 'classnames'
+import React, { memo } from 'react'
+
+const TableRow = memo(
+  ({ className, children, header, error, success, size = 'sm', ...props }) => {
+    const classnamesObj = {
+      'p-1 h-12 bg-white': !header,
+      'h-8': !header && size === 'sm',
+      'h-9 font-bold text-base ': !header && size === 'lg',
+      'bg-misty-rose': error,
+      'bg-spring3': success
+    }
+
+    return (
+      <tr className={classnames(classnamesObj, className, 'text-')} {...props}>
+        {children}
+      </tr>
+    )
+  }
+)
+
+export default TableRow

packages/admin-ui/src/components/table/index.js

@@ -0,0 +1,19 @@
+import EditCell from './EditCell'
+import EmptyTable from './EmptyTable'
+import Table from './Table'
+import TableBody from './TableBody'
+import TableCell from './TableCell'
+import TableHead from './TableHead'
+import TableHeader from './TableHeader'
+import TableRow from './TableRow'
+
+export {
+  EditCell,
+  EmptyTable,
+  Table,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableBody
+}