feat: add table styling and components

react-typescript/src/components/App.tsx

@@ -9,7 +9,7 @@ function App(): JSX.Element {
     padding: 0;
   }
   html, body {
-    background-color: RGB(132, 151, 149);
+    background-color: RGB(255, 255, 253);
     color: RGB(227, 226, 215);
     width: 100%;
     height: 100%;

react-typescript/src/components/ItemsSection.tsx

@@ -1,66 +1,23 @@
-import { useMemo } from "react";
 import styled from "styled-components";
-import useAllItems from "../hooks/useAllItems";
 import ItemsTable from './ItemsTable';
 import Button from './Button';
+import useTableController from "../hooks/useTableController";
 
 function ItemsSection(): JSX.Element {
   const ItemsSection = styled.section`
-  height: 85vh;
+  height: 100vh;
-  ul {
+  display: flex;
-    display: flex;
+  flex-flow: column wrap;
-    flex-direction: row;
+  justify-content: center;
-    flex-wrap: wrap;
+  margin: 0 5%;
-    width: 100%;
+  role: 'region';
-    height: 100%;
-    color: white;
-    justify-content: center;
-    align-items: center;
-  }
-  li {
-    list-style: none;
-    display: inline-block;
-    height: 10%;
-    width: 40%;
-    border: 1px solid white;
-    margin: 3% 3%;
-  }
 `;
 
-const { items } = useAllItems();
+const { columns, data } = useTableController();
-const data = useMemo(() => items, [items]);
-const columns = useMemo(() => [
-  {
-    Header: "Details",
-    columns: [
-      {
-        Header: 'Name',
-        accessor: 'name',
-      },
-      {
-        Header: 'Conjured',
-        accessor: 'isConjured'
-      }
-    ],
-  },
-  {
-    Header: "Item Info",
-    columns: [
-      {
-        Header: 'Quality',
-        accessor: 'quality'
-      },
-      {
-        Header: 'Days Left',
-        accessor: 'sellIn'
-      }
-    ],
-  }
-], []);
 
   return (
     <ItemsSection>
-      <ItemsTable columns={columns} data={data}/>
+      <ItemsTable columns={columns} data={data} />
       <Button />
     </ItemsSection>
   );

react-typescript/src/components/ItemsTable.tsx

@@ -3,25 +3,37 @@ import styled from "styled-components";
 import { TTable } from "../types";
 
 function ItemTable({ columns, data }: TTable): JSX.Element {
-    const ItemsSection = styled.section`
+    const ItemsTable = styled.table`
-  height: 85vh;
+  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&family=Ubuntu:wght@300;400;500&display=swap');
-  ul {
+    height: 60%;
-    display: flex;
+    border: 1px solid RGB(12, 16, 36);
-    flex-direction: row;
+    border-radius: 10px;
-    flex-wrap: wrap;
+    min-height: 30%;
-    width: 100%;
+    color: RGB(12, 16, 36);
-    height: 100%;
+th, td, tr {
-    color: white;
+    font-family: 'Roboto', sans-serif;
-    justify-content: center;
+    outline: none;
-    align-items: center;
+    border: none;
+    border-collapse: collapse;
+    text-align: center;
+    font-size: 1.2rem;
   }
-  li {
+
-    list-style: none;
+
-    display: inline-block;
+  th {
-    height: 10%;
+    font-weight: 300;
-    width: 40%;
+  }
-    border: 1px solid white;
+
-    margin: 3% 3%;
+  tr {
+    font-weight: 100;
+  }
+
+  tr:nth-child(n):hover {
+    background-color: #f2f2f2;
+  }
+
+  tr:nth-child(2n + 1) {
+    background-color: RGB(245, 245, 243);
   }
 `;
     const {
@@ -36,10 +48,9 @@ function ItemTable({ columns, data }: TTable): JSX.Element {
     });
 
     return (
-
+        <ItemsTable {...getTableProps()}>
-        <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
    
-          <thead>
+          <thead className="header">
    
             {headerGroups.map(headerGroup => (
    
@@ -47,27 +58,9 @@ function ItemTable({ columns, data }: TTable): JSX.Element {
    
                 {headerGroup.headers.map(column => (
    
-                  <th
+                  <th {...column.getHeaderProps()}>
-   
-                    {...column.getHeaderProps()}
-   
-                    style={{
-   
-                      borderBottom: 'solid 3px red',
-   
-                      background: 'aliceblue',
-   
-                      color: 'black',
-   
-                      fontWeight: 'bold',
-   
-                    }}
-   
-                  >
-   
                     {column.render('Header')}
-   
+                    </th>
-                  </th>
    
                 ))}
    
@@ -94,16 +87,7 @@ function ItemTable({ columns, data }: TTable): JSX.Element {
                       <td
    
                         {...cell.getCellProps()}
-   
+
-                        style={{
-   
-                          padding: '10px',
-   
-                          border: 'solid 1px gray',
-   
-                          background: 'papayawhip',
-   
-                        }}
    
                       >
    
@@ -123,8 +107,7 @@ function ItemTable({ columns, data }: TTable): JSX.Element {
    
           </tbody>
    
-        </table>
+        </ItemsTable>
-   
       )
 }
 

react-typescript/src/hooks/useTableController.ts

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { useStore } from "../model";
+import { TTable } from "../types";
+
+function useTableController(): TTable {
+    const { state } = useStore();
+    const { items } = state;
+
+    const data = useMemo(() => items, [items]);
+    const columns = useMemo(() => [
+        {
+            Header: "Items",
+            columns: [
+                {
+                    Header: 'Name',
+                    accessor: 'name',
+                },
+                {
+                    Header: 'Conjured',
+                    accessor: 'isConjured',
+                    Cell: ({ cell: { value } }: any) => { return value ? 'Yes' : 'No' },
+                },
+                {
+                    Header: 'Quality',
+                    accessor: 'quality'
+                },
+                {
+                    Header: 'Days Left',
+                    accessor: 'sellIn'
+                }
+            ],
+        },
+    ], []);
+
+    return {
+        columns,
+        data
+    }
+}
+
+export default useTableController;