Loan Management - Copy this React, Tailwind Component to your project

import-React-from-"react";-import-{-FiEdit2,-FiTrash2-}-from-"react-icons/fi";-const-BookList-=-({-books,-onEdit,-onDelete-})-=>-{-return-(-<div-className="overflow-x-auto">-<table-className="w-full">-<thead-className="bg-secondary">-<tr>-<th-className="p-4-text-left">Tiêu-Đề</th>-<th-className="p-4-text-left">Tác-Giả</th>-<th-className="p-4-text-left">ISBN</th>-<th-className="p-4-text-left">Thể-Loại</th>-<th-className="p-4-text-left">Trạng-Thái</th>-<th-className="p-4-text-left">Thao-Tác</th>-</tr>-</thead>-<tbody>-{books.map((book)-=>-(-<tr-key={book.id}-className="border-b-border-border">-<td-className="p-4">{book.title}</td>-<td-className="p-4">{book.author}</td>-<td-className="p-4">{book.isbn}</td>-<td-className="p-4">{book.category}</td>-<td-className="p-4">-<span-className={`px-2-py-1-rounded-full-text-sm-${-book.status-===-"available"-?-"bg-primary/10-text-primary"-:-"bg-destructive/10-text-destructive"-}`}->-{book.status-===-"available"-?-"Sẵn-Có"-:-"Đã-Mượn"}-</span>-</td>-<td-className="p-4">-<div-className="flex-space-x-2">-<button-onClick={()-=>-onEdit(book)}-className="text-primary-hover:text-primary/80"-title="Chỉnh-sửa-sách"->-<FiEdit2-/>-</button>-<button-onClick={()-=>-onDelete(book.id)}-className="text-destructive-hover:text-destructive/80"-title="Xóa-sách"->-<FiTrash2-/>-</button>-</div>-</td>-</tr>-))}-</tbody>-</table>-</div>-);-};-export-default-BookList;-dựa-vào-code-trên-hãy-tạo-Loan-cho-tôi,-tôi-cần-các-field-này-[LoanDate],-user,-book-,[DueDate]-,[ReturnDate]-,[Status]-,[CreatedAt]-,[UpdatedAt],-các-chức-năng-thêm,-xóa-sửa,-tìm-kiếm