gistfile1.txt

import React, {useState, useEffect, useContext} from "react"
import {Link} from "react-router-dom"
import axios from "axios"

import AppContext from "../../contexts/AppContext"
import Card from "../Card"
import EmployeeType from "../../types/EmployeeType"
import CrudIndex from "../CrudIndex"

const EmployeesCrudIndex = (props: any) => {
    return (
        <CrudIndex>
            <table className="table table-bordered" style={{tableLayout: 'fixed'}}>
                <thead className="thead-light">
                    <tr className="bg-light text-center">
                        <th>Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {records && employees.map((employee: EmployeeType) => (
                        <tr key={employee.id}>
                            <td>
                                <Link to={`/employees/${employee.id}`}>
                                    {employee.firstName} {employee.lastName}
                                </Link>
                            </td>
                            <td>
                                <button className="btn btn-danger btn-sm" onClick={() => deleteEmployee(employee.id)}>
                                    Delete
                                </button>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </Card>
    )
}

export default EmployeesIndex