Populate tables

This commit is contained in:
Werner
2023-06-07 08:49:02 -03:00
parent 214e2c5d02
commit 00a54f7ada

View File

@ -5,8 +5,13 @@ import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav'; import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar'; import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown'; import NavDropdown from 'react-bootstrap/NavDropdown';
import { useState } from 'react'
export default function Home() { export default function Home() {
const [instructionStatus, setInstructionStatus] = useState([]);
const [reservationStations, setReservationStations] = useState([]);
const [registerStatus, setRegisterStatus] = useState([]);
return ( return (
<> <>
<Head> <Head>
@ -21,7 +26,7 @@ export default function Home() {
crossorigin="anonymous" crossorigin="anonymous"
/> />
</Head> </Head>
<Navbar bg="light" expand="lg"> <Navbar bg="dark" variant="dark" expand="lg">
<Container> <Container>
<Navbar.Brand href="/">Tomasulo</Navbar.Brand> <Navbar.Brand href="/">Tomasulo</Navbar.Brand>
</Container> </Container>
@ -29,35 +34,102 @@ export default function Home() {
<main> <main>
<Container> <Container>
<div className="my-4"> <div className="my-4">
<h1>Instruction Status</h1> <h3>Instruction Status</h3>
</div> </div>
<Table striped bordered hover> <Table striped bordered hover>
<thead> <thead>
<tr> <tr>
<th>#</th> <th>Instruction</th>
<th>First Name</th> <th>Issued</th>
<th>Last Name</th> <th>Execute</th>
<th>Username</th> <th>Write Result</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{instructionStatus.map((instr, index) => (
<tr>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
</tr>
))}
</tbody>
</Table>
<div className="my-4">
<h3>Reservations Stations</h3>
</div>
<Table striped bordered hover>
<thead>
<tr> <tr>
<td>1</td> <th>Name</th>
<td>Mark</td> <th>Busy</th>
<td>Otto</td> <th>Op</th>
<td>@mdo</td> <th>Vj</th>
<th>Vk</th>
<th>Qj</th>
<th>Qk</th>
<th>A</th>
</tr> </tr>
</thead>
<tbody>
{reservationStations.map((instr, index) => (
<tr>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
</tr>
))}
</tbody>
</Table>
<div className="my-4">
<h3>Registers Status</h3>
</div>
<Table striped bordered hover>
<thead>
<tr> <tr>
<td>2</td> <th>Field</th>
<td>Jacob</td> <th>F0</th>
<td>Thornton</td> <th>F2</th>
<td>@fat</td> <th>F4</th>
</tr> <th>F6</th>
<tr> <th>F8</th>
<td>3</td> <th>F10</th>
<td colSpan="2">Larry the Bird</td> <th>F14</th>
<td>@twitter</td> <th>F16</th>
<th>F18</th>
<th>F20</th>
<th>F22</th>
<th>F24</th>
<th>F28</th>
<th>F30</th>
</tr> </tr>
</thead>
<tbody>
{registerStatus.map((instr, index) => (
<tr>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
<td>Add1</td>
</tr>
))}
</tbody> </tbody>
</Table> </Table>
</Container> </Container>