67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { Container, Row, Col, Card, Tabs, Tab } from 'react-bootstrap';
|
|
import { Register } from './types';
|
|
import { renderAccess } from './RegisterBrowser';
|
|
|
|
/**
|
|
* A client-side component that displays the details of a single register.
|
|
* @param register The register object to display.
|
|
* @param defaultActiveKey The default active tab to display.
|
|
* @returns A React component that displays the register details.
|
|
*/
|
|
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>
|
|
);
|
|
}
|