From 1838889a0c284f57ac7048a88d4b55629c73d13b Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 10 Nov 2024 20:52:48 +0100
Subject: [PATCH] Extract a common TableOfContents component

---
 app/ui/arrangements/arrangements-table.tsx | 57 ++++++++--------------
 app/ui/components/table-of-contents.tsx    | 26 ++++++++++
 2 files changed, 45 insertions(+), 38 deletions(-)
 create mode 100644 app/ui/components/table-of-contents.tsx

diff --git a/app/ui/arrangements/arrangements-table.tsx b/app/ui/arrangements/arrangements-table.tsx
index 5f2f164..66e41d4 100644
--- a/app/ui/arrangements/arrangements-table.tsx
+++ b/app/ui/arrangements/arrangements-table.tsx
@@ -5,6 +5,7 @@
 import React, { useState } from "react"
 import { TableArrangement } from '@/app/lib/definitions';
 import { classNames } from "../components/button";
+import TableOfContents from "../components/table-of-contents";
 
 export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
     const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
@@ -32,43 +33,23 @@ export default function ArrangementsTable ({onArrangementSelected}: {onArrangeme
     arrangements.length === 0 && loadArrangements();
 
     return(
-        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
-        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-          <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-            Simulations
-            <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-              There are {arrangements.length} simmulations in the list
-            </p>
-          </caption>
-          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-            <tr>
-              <th scope="col" className="px-6 py-3">
-                Name
-              </th>
-              <th scope="col" className="px-6 py-3">
-                Discomfort
-              </th>              
-              <th scope="col" className="px-6 py-3">
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {arrangements.map((arrangement) => (
-              <tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
-                <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                  {arrangement.name}
-                </th>
-                <td className="px-6 py-4">
-                  {arrangement.discomfort}
-                </td>
-                <td>
-                    <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      <TableOfContents
+        headers={['Name', 'Discomfort', 'Actions']}
+        caption='Simulations'
+        elements={arrangements}
+        rowRender={(arrangement) => (
+          <tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+            <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              {arrangement.name}
+            </th>
+            <td className="px-6 py-4">
+              {arrangement.discomfort}
+            </td>
+            <td>
+                <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
+            </td>
+          </tr>
+        )}
+      />
     );
 }
\ No newline at end of file
diff --git a/app/ui/components/table-of-contents.tsx b/app/ui/components/table-of-contents.tsx
new file mode 100644
index 0000000..209af87
--- /dev/null
+++ b/app/ui/components/table-of-contents.tsx
@@ -0,0 +1,26 @@
+export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
+    return (
+        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
+            <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+                    {caption}
+                    <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+                        There are {elements.length} elements in the list
+                    </p>
+                </caption>
+                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                    <tr>
+                        {headers.map((header) => (
+                            <th scope="col" className="px-6 py-3">
+                                {header}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {elements.map((element) => rowRender(element))}
+                </tbody>
+            </table>
+        </div>
+    )
+}