improve game settings table

Author: weclaw1

optimal-settings-frontend/package-lock.json

@@ -36,7 +36,7 @@
     "eslint-config-prettier": "^9.0.0",
     "postcss": "^8",
     "prettier": "3.0.3",
-    "tailwindcss": "^3",
+    "tailwindcss": "3.4.1",
     "typescript": "^5"
   }
 }

optimal-settings-frontend/package.json

@@ -9,12 +9,14 @@ type SettingsTable = {
 
 export default function SettingsTable({ settings }: SettingsTable) {
   return (
-    <Table striped border="border">
+    <Table striped border="border" tableLayout="fixed">
       <TableBody>
         {settings.map(([key, value]) => (
           <TableRow key={key}>
-            <TableCell type="th">{key}</TableCell>
-            <TableCell>{value}</TableCell>
+            <TableCell type="th" border="border">
+              {key}
+            </TableCell>
+            <TableCell border="border">{value}</TableCell>
           </TableRow>
         ))}
       </TableBody>

optimal-settings-frontend/src/app/games/[slug]/components/SettingsTable.tsx

@@ -5,6 +5,7 @@ type Table = {
   pinColumns?: boolean;
   striped?: boolean;
   textAlignment?: "left" | "center" | "right";
+  tableLayout?: "auto" | "fixed";
   children: React.ReactNode;
 };
 
@@ -15,6 +16,7 @@ export default function Table({
   pinColumns,
   striped,
   textAlignment,
+  tableLayout,
   children,
 }: Table) {
   let tableClasses = "table";
@@ -38,7 +40,9 @@ export default function Table({
   }
   return (
     <div className="overflow-x-auto">
-      <table className={tableClasses}>{children}</table>
+      <table className={tableClasses} style={{ tableLayout: tableLayout }}>
+        {children}
+      </table>
     </div>
   );
 }

optimal-settings-frontend/src/components/Table.tsx

@@ -1,9 +1,18 @@
 type TableCell = {
   type?: "th" | "td";
+  border?: "border" | "border-2" | "border-4" | "border-8";
   children: React.ReactNode;
 };
 
-export default function TableCell({ type = "td", children }: TableCell) {
+export default function TableCell({
+  type = "td",
+  border,
+  children,
+}: TableCell) {
   const Cell = type;
-  return <Cell>{children}</Cell>;
+  let cellClasses = "";
+  if (border) {
+    cellClasses += ` ${border} border-base-300`;
+  }
+  return <Cell className={cellClasses}>{children}</Cell>;
 }