Table component. Bookmarks edit view

client/src/components/UI/Layout/Layout.tsx

@@ -1,6 +1,10 @@
 import classes from './Layout.module.css';
 
-export const Container = (props: any): JSX.Element => {
+interface ComponentProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+export const Container = (props: ComponentProps): JSX.Element => {
   return (
     <div className={classes.Container}>
       {props.children}

client/src/components/UI/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 th,
+.Table td {
+  padding: 10px;
+}
+
+/* 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 {
+  /* opacity: 0.5; */
+  transition: all 0.2s;
+}

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

@@ -0,0 +1,25 @@
+import classes from './Table.module.css';
+
+interface ComponentProps {
+  children: JSX.Element | JSX.Element[];
+  headers: string[];
+}
+
+const Table = (props: ComponentProps): JSX.Element => {
+  return (
+    <div className={classes.TableContainer}>
+      <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>
+  )
+}
+
+export default Table;