add basic table to games page

src/assets/style/global.css

@@ -60,3 +60,11 @@ ul {
 li:not(:last-child) {
   margin-bottom: var(--prj-spacing-1);
 }
+
+/* TODO: Move to where it belogns */
+th,
+td {
+  padding: 0.25rem 1rem;
+  border: 1px solid white;
+  text-align: center;
+}

src/components/Table.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+type DataItem = Record<string, any>;
+
+export interface Header {
+  key: string;
+  header: string;
+  formatter?: (data: DataItem) => JSX.ElementType;
+}
+
+interface Props {
+  data: DataItem[];
+  headers: Header[];
+}
+
+export default function Table({ data, headers }: Props): JSX.Element {
+  function getProperty(data: DataItem, header: Header): any {
+    if (header.key === 'index') {
+      return 'index';
+    }
+
+    return data[header.key];
+  }
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          {headers.map((item, idx) => (
+            <th key={idx}>{item.header}</th>
+          ))}
+        </tr>
+      </thead>
+
+      <tbody>
+        {data.map((item, idx) => (
+          <tr key={idx}>
+            {headers.map((header, hidx) => (
+              <td key={hidx}>{getProperty(item.data, header)}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

src/pages/games/index.astro

@@ -1,20 +1,49 @@
 ---
-import Layout from '../../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
+import Layout from '../../layouts/Layout.astro';
+import Table, { Header } from '../../components/Table.jsx';
 
 const games = await getCollection('games');
+
+const headers: Header[] = [
+  {
+    key: 'index',
+  },
+  {
+    key: 'title',
+    header: 'Title',
+  },
+  {
+    key: 'status',
+    header: 'Status',
+  },
+  {
+    key: 'times_played',
+    header: 'Times Played',
+  },
+  {
+    key: 'registered_hours',
+    header: 'Registered Hours',
+  },
+];
 ---
 
 <Layout title="aleidk">
   <h1>Games</h1>
 
-  <ul>
-    {
-      games.map((item) => (
-        <li>
-          <a href={`games/${item.slug}`}>{item.data.title}</a>
-        </li>
-      ))
-    }
-  </ul>
+  <section>
+    <Table data={games} headers={headers} />
+  </section>
+
+  <section>
+    <ul>
+      {
+        games.map((item) => (
+          <li>
+            <a href={`games/${item.slug}`}>{item.data.title}</a>
+          </li>
+        ))
+      }
+    </ul>
+  </section>
 </Layout>