working proof-of-concept

src/app/globals.css

@@ -107,12 +107,25 @@ body {
   text-decoration: none;
 } */
 
-a {
-  color: var(--main_1);
-}
-
 /* @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;
   }
 } */
+
+a {
+  color: var(--main_1);
+}
+
+table {
+  overflow: auto;
+  border-collapse: collapse;
+  /* border: 1px solid var(--light_1); */
+}
+
+th,
+td {
+  padding: 0.25rem 1rem;
+  text-align: left;
+  vertical-align: top;
+}

src/app/page.module.css

@@ -34,7 +34,6 @@
   transition: border-color 0.1s linear;
   font-size: 1rem;
   font-family: inherit;
-  
 }
 
 .text_field:hover {
@@ -46,3 +45,15 @@
   padding: 0 3rem;
   color: var(--text_light);
 }
+
+.table_container {
+  overflow-x: scroll;
+}
+
+#output_table tbody td:nth-child(1) {
+  text-align: center;
+}
+
+#output_table thead th:nth-child(2) {
+  min-width: 10em;
+}

src/components/inspector.tsx

@@ -38,15 +38,50 @@ export function Inspector(props: InspectorProps) {
 function Out(props: { currentString: string }) {
   const ctx = useContext(UtfdumpContext);
   
-  if (!ctx.utfdump) {
-    return (
-      <p>Loading WASM...</p>
-    );
+  let rows = [];
+
+  if (ctx.utfdump) {
+    for (const codepointStr of props.currentString) {
+      const codepoint = codepointStr.codePointAt(0);
+      
+      if (codepoint !== undefined) {
+        const charData = ctx.utfdump.codepoint_char_data(codepoint);
+
+        rows.push((
+          <tr>
+            <td>{codepointStr.replace(/\s+/, ' ')}</td>
+            <td>{charData?.name()}</td>
+            <td>U+{codepoint.toString(16).padStart(4, '0')}</td>
+          </tr>
+        ));
+
+        charData?.free();
+      }
+    }
   }
 
   return (
-    <section className={styles.output_section}>
-      <p id='out_test'>{ctx.utfdump.spongebob_case(props.currentString)}</p>
+    <section className={styles.table_container}>
+      <div className={styles.overflow_scroll}>
+        <table id={styles.output_table}>
+          <thead>
+            <tr>
+              <th>Char</th>
+              <th>Name</th>
+              <th>Codepoint</th>
+              <th>UTF-8</th>
+              <th>UTF-16</th>
+              <th>Category</th>
+              <th>Combining</th>
+              <th>Bidirectional</th>
+              <th>Numeric value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows}
+          </tbody>
+        </table>
+      </div>
     </section>
   );
 }