Untitled

mail@pastecode.io avatar
unknown
jsx
2 years ago
2.2 kB
2
Indexable
Never
import { useState } from "react";
import { Button, Table } from "react-bootstrap";
import employeesFile from "../employees.json"

function Employees() {
  const [employees, updateEmployees] = useState(employeesFile)
  // // TODO: Load data from backend service

  // const addEmployee = () => {
  //   // TODO: Add validations
  //   // TODO: Add an employee to the table
  // }

  // const deleteEmployee = (employee) => {
  //   // TODO: Delete an employee from the table
  // }

  return (
  <div> 
  {/* { employees.map((info, idk) => 
    <div key ={idk}>
      <div>{info.id}</div>
      </div>)} */}
  
  
    <div className="container">
      <h2 className="mb-4">Employees</h2>
      <Table className="table table-hover table-bordered table-sortable">
        <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Avatar</th>
          <th scope="col">Actions</th>
          
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>"id"</td>
          <td>"first_name" + "last_name"</td>
          <td>{employees.email}</td>
          <td><img src={"https://reqres.in/img/faces/1-image.jpg"} alt=""/></td>
          <td><Button type="button" variant="danger">Delete</Button></td>
        </tr>
        <tr>
          <td>"id"</td>
          <td>"first_name" + "last_name"</td>
          <td>"employees.email"</td>
          <td>"employees.avatar</td>
          <td><Button type="button" variant="danger">Delete</Button></td>
        </tr>

        <tr className="input-row">
          <td><input type="text" placeholder="ID" className="form-control"/></td>
          <td><input type="text" placeholder="Name" className="form-control"/></td>
          <td><input type="text" placeholder="Email" className="form-control"/></td>
          <td><input type="text" placeholder="Avatar" className="form-control"/></td>
          <td><Button type="submit" variant="success">Add</Button></td>
        </tr>
        </tbody>
      </Table>
    </div>

  </div>);
}

export default Employees;