Trying to get a dokku build :)

src/app/registers/RegisterDetailClient.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Container, Row, Col, Card, Tabs, Tab } from 'react-bootstrap';
+import { Register } from './types';
+import { renderAccess } from './RegisterBrowser';
+
+export default function RegisterDetailClient({
+  register,
+  defaultActiveKey,
+}: {
+  register: Register;
+  defaultActiveKey?: string;
+}) {
+  return (
+    <Container fluid className="py-4">
+      <Row>
+        <Col xs={12}>
+          <Card>
+            <Card.Header>
+              <strong>{register.name}</strong> ({register.hex_address} / {register.dec_address}){' '}
+              {register.issue_4_only && <span className="badge bg-danger">Issue 4 Only</span>}
+            </Card.Header>
+            <Card.Body>
+              {defaultActiveKey ? (
+                <Tabs defaultActiveKey={defaultActiveKey} id={`register-tabs-${register.hex_address}`}>
+                  {register.common && (
+                    <Tab eventKey="common" title="Read/Write">
+                      {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>
+              ) : null}
+              {register.notes.map((note, index) => (
+                <p key={index} className="small text-muted">
+                  {note.ref} {note.text}
+                </p>
+              ))}
+              {register.text && register.text.length > 0 && (
+                <div className="mt-3">
+                  <h5>Notes:</h5>
+                  <pre>{register.text}</pre>
+                </div>
+              )}
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
+}