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

tạo-cho-tôi-giao-diện-Loan-với-,[User-,-book-,[LoanDate]-,[DueDate]-,[ReturnDate]-,[Status]-,[CreatedAt]-,[UpdatedAt],-có-các-chức-năng-thêm,-xóa-,-sửa-tìm-kiếm-giống-thế-này-import-React,-{-useState-}-from-"react";-import-{-FiPlus-}-from-"react-icons/fi";-import-SearchBar-from-"../common/SearchBar";-import-BookList-from-"./BookList";-import-AddBookModal-from-"./AddBookModal";-import-EditBookModal-from-"./EditBookModal";-const-Books-=-()-=>-{-const-[searchTerm,-setSearchTerm]-=-useState("");-const-[showAddModal,-setShowAddModal]-=-useState(false);-const-[showEditModal,-setShowEditModal]-=-useState(false);-const-[selectedBook,-setSelectedBook]-=-useState(null);-const-[books,-setBooks]-=-useState([-{-id:-1,-title:-"The-Great-Gatsby",-author:-"F.-Scott-Fitzgerald",-isbn:-"978-0743273565",-category:-"Fiction",-status:-"available",-},-{-id:-2,-title:-"To-Kill-a-Mockingbird",-author:-"Harper-Lee",-isbn:-"978-0446310789",-category:-"Fiction",-status:-"borrowed",-},-]);-const-handleSearch-=-(value)-=>-{-setSearchTerm(value);-};-const-handleAddBook-=-(newBook)-=>-{-setBooks((prevBooks)-=>-[...prevBooks,-{-...newBook,-id:-Date.now()-}]);-};-const-handleEditBook-=-(updatedBook)-=>-{-setBooks((prevBooks)-=>-prevBooks.map((book)-=>-(book.id-===-updatedBook.id-?-updatedBook-:-book))-);-};-const-handleDeleteBook-=-(bookId)-=>-{-if-(window.confirm("Are-you-sure-you-want-to-delete-this-book?"))-{-setBooks((prevBooks)-=>-prevBooks.filter((book)-=>-book.id-!==-bookId));-}-};-const-handleEditClick-=-(book)-=>-{-setSelectedBook(book);-setShowEditModal(true);-};-const-filteredBooks-=-books.filter(-(book)-=>-book.title.toLowerCase().includes(searchTerm.toLowerCase())-||-book.author.toLowerCase().includes(searchTerm.toLowerCase())-||-book.isbn.includes(searchTerm)-);-return-(-<div-className="bg-card-p-6-rounded-lg-shadow-sm">-<div-className="flex-justify-between-items-center-mb-6">-<h2-className="text-xl-font-bold">Quản-lý-Sách</h2>-<button-onClick={()-=>-setShowAddModal(true)}-className="bg-primary-text-white-px-4-py-2-rounded-lg-flex-items-center-space-x-2"->-<FiPlus-/>-<span>Thêm-Sách</span>-</button>-</div>-<SearchBar-onSearch={handleSearch}-/>-<BookList-books={filteredBooks}-onEdit={handleEditClick}-onDelete={handleDeleteBook}-/>-{showAddModal-&&-(-<AddBookModal-onClose={()-=>-setShowAddModal(false)}-onSubmit={handleAddBook}-/>-)}-{showEditModal-&&-selectedBook-&&-(-<EditBookModal-book={selectedBook}-onClose={()-=>-{-setShowEditModal(false);-setSelectedBook(null);-}}-onSubmit={handleEditBook}-/>-)}-</div>-);-};-export-default-Books;