From bb125dbc873e09fde315c08cdfbfa38ad875ac89 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <ob248@proton.me>
Date: Tue, 27 Jan 2026 21:03:57 +0000
Subject: [PATCH] Update Test.tsx

---
 packages/frontend/src/pages/Test.tsx | 87 +++++++++++++---------------
 1 file changed, 41 insertions(+), 46 deletions(-)

diff --git a/packages/frontend/src/pages/Test.tsx b/packages/frontend/src/pages/Test.tsx
index a380b39..ea9643e 100644
--- a/packages/frontend/src/pages/Test.tsx
+++ b/packages/frontend/src/pages/Test.tsx
@@ -2,56 +2,51 @@ import Icon, { iconNames, iconStyles } from "@/components/ui/icon";
 
 function Test() {
   return (
-    <main className="w-full min-h-[100vh] flex flex-col justify-center items-center p-4">
-      <div>
-        <div className="overflow-x-auto">
-          <table className="border-collapse">
-            <thead>
-              <tr className="border-b">
+    <main className="w-full min-h-[100vh] flex flex-col justify-center items-center text-center p-4">
+      <div className="overflow-x-auto">
+        <table className="border-collapse">
+          <thead>
+            <tr className="border-b">
+              {Array.from(
+                { length: Math.ceil(iconNames.length / 10) },
+                (_, groupNumber) => groupNumber + 1,
+              ).flatMap((groupNumber) => [
+                <th key={`name-${groupNumber}`} className="text-left p-2 font-medium">
+                  Name
+                </th>,
+                ...iconStyles.map((iconStyle) => (
+                  <th key={`${iconStyle}-${groupNumber}`} className="text-center p-2 font-medium capitalize">
+                    {iconStyle}
+                  </th>
+                )),
+              ])}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: 10 }, (_, rowNumber) => rowNumber + 1).map((rowNumber) => (
+              <tr key={`row-${rowNumber}`} className="border-b hover:bg-muted/50">
                 {Array.from(
                   { length: Math.ceil(iconNames.length / 10) },
                   (_, groupNumber) => groupNumber + 1,
-                ).flatMap((groupNumber) => [
-                  <th key={`name-${groupNumber}`} className="text-left p-2 font-medium">
-                    Name
-                  </th>,
-                  ...iconStyles.map((iconStyle) => (
-                    <th
-                      key={`${iconStyle}-${groupNumber}`}
-                      className="text-center p-2 font-medium capitalize"
-                    >
-                      {iconStyle}
-                    </th>
-                  )),
-                ])}
-              </tr>
-            </thead>
-            <tbody>
-              {Array.from({ length: 10 }, (_, rowNumber) => rowNumber + 1).map((rowNumber) => (
-                <tr key={`row-${rowNumber}`} className="border-b hover:bg-muted/50">
-                  {Array.from(
-                    { length: Math.ceil(iconNames.length / 10) },
-                    (_, groupNumber) => groupNumber + 1,
-                  ).flatMap((groupNumber) => {
-                    const iconIndex = (groupNumber - 1) * 10 + (rowNumber - 1);
-                    const name = iconNames[iconIndex];
+                ).flatMap((groupNumber) => {
+                  const iconIndex = (groupNumber - 1) * 10 + (rowNumber - 1);
+                  const name = iconNames[iconIndex];
 
-                    return [
-                      <td key={`name-${groupNumber}-${rowNumber}`} className="font-mono text-sm pl-2 pr-12">
-                        {name ?? ""}
-                      </td>,
-                      ...iconStyles.map((iconStyle) => (
-                        <td key={`${iconStyle}-${groupNumber}-${rowNumber}`} className="p-2 text-center">
-                          {name ? <Icon icon={name} iconStyle={iconStyle} size={24} /> : null}
-                        </td>
-                      )),
-                    ];
-                  })}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+                  return [
+                    <td key={`name-${groupNumber}-${rowNumber}`} className="font-mono text-sm pl-2 pr-12">
+                      {name ?? ""}
+                    </td>,
+                    ...iconStyles.map((iconStyle) => (
+                      <td key={`${iconStyle}-${groupNumber}-${rowNumber}`} className="p-2 text-center">
+                        {name ? <Icon icon={name} iconStyle={iconStyle} size={24} /> : null}
+                      </td>
+                    )),
+                  ];
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     </main>
   );