Added CompactTable and ActionIcons UI components

client/src/components/UI/Tables/CompactTable/CompactTable.module.css

@@ -0,0 +1,16 @@
+.CompactTable {
+  display: grid;
+}
+
+.CompactTable span {
+  color: var(--color-primary);
+}
+
+.CompactTable span:last-child {
+  margin-bottom: 10px;
+}
+
+.Separator {
+  border-bottom: 1px solid var(--color-primary);
+  margin: 10px 0;
+}

client/src/components/UI/Tables/CompactTable/CompactTable.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import classes from './CompactTable.module.css';
+
+interface Props {
+  headers: string[];
+  children?: ReactNode;
+}
+
+export const CompactTable = ({ headers, children }: Props): JSX.Element => {
+  return (
+    <div
+      className={classes.CompactTable}
+      style={{ gridTemplateColumns: `repeat(${headers.length}, 1fr)` }}
+    >
+      {headers.map((h, idx) => (
+        <span key={idx}>{h}</span>
+      ))}
+
+      <div
+        className={classes.Separator}
+        style={{ gridColumn: `1 / ${headers.length + 1}` }}
+      ></div>
+
+      {children}
+    </div>
+  );
+};

client/src/components/UI/Tables/Table/Table.module.css

@@ -0,0 +1,41 @@
+.TableContainer {
+  width: 100%;
+}
+
+.Table {
+  border-collapse: collapse;
+  width: 100%;
+  text-align: left;
+  font-size: 16px;
+  color: var(--color-primary);
+  table-layout: fixed;
+}
+
+.Table th,
+.Table td {
+  padding: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Head */
+.Table th {
+  --header-radius: 4px;
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+.Table th:first-child {
+  border-top-left-radius: var(--header-radius);
+  border-bottom-left-radius: var(--header-radius);
+}
+
+.Table th:last-child {
+  border-top-right-radius: var(--header-radius);
+  border-bottom-right-radius: var(--header-radius);
+}
+
+/* Body */
+.Table td {
+  transition: all 0.2s;
+}

client/src/components/UI/Tables/Table/Table.tsx

@@ -0,0 +1,26 @@
+import classes from './Table.module.css';
+
+interface Props {
+  children: React.ReactNode;
+  headers: string[];
+  innerRef?: any;
+}
+
+export const Table = (props: Props): JSX.Element => {
+  return (
+    <div className={classes.TableContainer} ref={props.innerRef}>
+      <table className={classes.Table}>
+        <thead className={classes.TableHead}>
+          <tr>
+            {props.headers.map(
+              (header: string, index: number): JSX.Element => (
+                <th key={index}>{header}</th>
+              )
+            )}
+          </tr>
+        </thead>
+        <tbody className={classes.TableBody}>{props.children}</tbody>
+      </table>
+    </div>
+  );
+};