First version of app, by GPT5

src/app/registers/RegisterBrowser.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+import { Register } from './types';
+import { Form, Card, Container, Row, Col } from 'react-bootstrap';
+
+interface RegisterBrowserProps {
+  registers: Register[];
+}
+
+export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredRegisters = registers.filter(register =>
+    register.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    register.description.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <Container fluid>
+      <Form.Group className="mb-3">
+        <Form.Control
+          type="text"
+          placeholder="Search registers..."
+          value={searchTerm}
+          onChange={e => setSearchTerm(e.target.value)}
+        />
+      </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>
+        ))}
+      </Row>
+    </Container>
+  );
+}