Formatting tables

src/app/registers/RegisterBrowser.tsx

@@ -1,13 +1,57 @@
 'use client';
 
 import { useState } from 'react';
-import { Register } from './types';
-import { Form, Card, Container, Row, Col } from 'react-bootstrap';
+import { Register, RegisterAccess, Note } from './types';
+import { Form, Card, Container, Row, Col, Tabs, Tab, Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 interface RegisterBrowserProps {
   registers: Register[];
 }
 
+function renderAccess(access: RegisterAccess) {
+  const renderTooltip = (notes: Note[]) => (
+    <Tooltip id="tooltip">
+      {notes.map((note, index) => (
+        <div key={index}>{note.text}</div>
+      ))}
+    </Tooltip>
+  );
+
+  return (
+    <>
+      <Table striped bordered hover size="sm" className="bits-table">
+        <thead>
+          <tr>
+            <th>Bits</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {access.operations.map((op, index) => {
+            const notes = access.notes.filter(note => note.ref === op.footnoteRef);
+            return (
+              <tr key={index}>
+                <td>{op.bits}</td>
+                <td>
+                  {op.description}
+                  {op.footnoteRef && notes.length > 0 && (
+                    <OverlayTrigger placement="top" overlay={renderTooltip(notes)}>
+                      <span className="footnote-ref">{op.footnoteRef}</span>
+                    </OverlayTrigger>
+                  )}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+      {access.notes.map((note, index) => (
+        <p key={index} className="small text-muted">{note.ref} {note.text}</p>
+      ))}
+    </>
+  );
+}
+
 export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
   const [searchTerm, setSearchTerm] = useState('');
 
@@ -16,6 +60,13 @@ export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
     register.description.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+  const getDefaultActiveKey = (register: Register) => {
+    if (register.common) return 'common';
+    if (register.read) return 'read';
+    if (register.write) return 'write';
+    return '';
+  };
+
   return (
     <Container fluid>
       <Form.Group className="mb-3">
@@ -27,18 +78,28 @@ export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
         />
       </Form.Group>
       <Row>
-        {filteredRegisters.map(register => (
-          <Col key={register.hex_address} xs={12} md={6} lg={4} className="mb-4">
-            <Card>
-              <Card.Header>
-                <strong>{register.name}</strong> ({register.hex_address} / {register.dec_address})
-              </Card.Header>
-              <Card.Body>
-                <pre style={{ whiteSpace: 'pre-wrap' }}>{register.description}</pre>
-              </Card.Body>
-            </Card>
-          </Col>
-        ))}
+        {filteredRegisters.map(register => {
+          const defaultActiveKey = getDefaultActiveKey(register);
+          return (
+            <Col key={register.hex_address} xs={12} className="mb-4">
+              <Card>
+                <Card.Header>
+                  <strong>{register.name}</strong> ({register.hex_address} / {register.dec_address})
+                </Card.Header>
+                <Card.Body>
+                  <Tabs defaultActiveKey={defaultActiveKey} id={`register-tabs-${register.hex_address}`}>
+                    {register.common && <Tab eventKey="common" title="R/W">{renderAccess(register.common)}</Tab>}
+                    {register.read && <Tab eventKey="read" title="Read">{renderAccess(register.read)}</Tab>}
+                    {register.write && <Tab eventKey="write" title="Write">{renderAccess(register.write)}</Tab>}
+                  </Tabs>
+                  {register.notes.map((note, index) => (
+                    <p key={index} className="small text-muted">{note.ref} {note.text}</p>
+                  ))}
+                </Card.Body>
+              </Card>
+            </Col>
+          );
+        })}
       </Row>
     </Container>
   );