46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
'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>
|
|
);
|
|
}
|