function MainComponent() { const [books, setBooks] = React.useState([ { id: 1, title: "1984", author: "George Orwell", genre: "Dystopian", holder: "John Doe", history: [ "John Doe" ] }, { id: 2, title: "To Kill a Mockingbird", author: "Harper Lee", genre: "Fiction", holder: "Jane Smith", history: [ "Jane Smith" ] }, { id: 3, title: "The Great Gatsby", author: "F. Scott Fitzgerald", genre: "Classic", holder: "Alex Johnson", history: [ "Alex Johnson" ] } ]); const [formValues, setFormValues] = React.useState({ title: "", author: "", genre: "", holder: "" }); const [searchQuery, setSearchQuery] = React.useState(""); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormValues({ ...formValues, [name]: value }); }; const handleSearchChange = (e)=>setSearchQuery(e.target.value); const handleSubmit = (e)=>{ e.preventDefault(); const newBook = { id: books.length + 1, ...formValues, history: [ formValues.holder ] }; setBooks([ ...books, newBook ]); setFormValues({ title: "", author: "", genre: "", holder: "" }); }; const filteredBooks = books.filter((book)=>book.title.toLowerCase().includes(searchQuery.toLowerCase()) || book.author.toLowerCase().includes(searchQuery.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "Library Management"), /*#__PURE__*/ React.createElement("input", { type: "text", value: searchQuery, onChange: handleSearchChange, placeholder: "Search by title or author", className: "p-2 border border-gray-300 rounded mb-4 w-full", name: "search", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-800 text-white", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "w-1/5 text-left py-3 px-4 uppercase font-semibold text-sm", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Title"), /*#__PURE__*/ React.createElement("th", { className: "w-1/5 text-left py-3 px-4 uppercase font-semibold text-sm", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Author"), /*#__PURE__*/ React.createElement("th", { className: "w-1/5 text-left py-3 px-4 uppercase font-semibold text-sm", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Genre"), /*#__PURE__*/ React.createElement("th", { className: "w-1/5 text-left py-3 px-4 uppercase font-semibold text-sm", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Holder"), /*#__PURE__*/ React.createElement("th", { className: "w-1/5 text-left py-3 px-4 uppercase font-semibold text-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "History"))), /*#__PURE__*/ React.createElement("tbody", { className: "text-gray-700", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, filteredBooks.map((book)=>{ const { id, title, author, genre, holder, history } = book; return /*#__PURE__*/ React.createElement("tr", { key: id, __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "w-1/5 text-left py-3 px-4 font-light", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, title), /*#__PURE__*/ React.createElement("td", { className: "w-1/5 text-left py-3 px-4 font-light", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, author), /*#__PURE__*/ React.createElement("td", { className: "w-1/5 text-left py-3 px-4 font-light", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, genre), /*#__PURE__*/ React.createElement("td", { className: "w-1/5 text-left py-3 px-4 font-light", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, holder), /*#__PURE__*/ React.createElement("td", { className: "w-1/5 text-left py-3 px-4 font-light", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, history.join(", "))); }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Add a new book"), /*#__PURE__*/ React.createElement("form", { className: "grid grid-cols-1 gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", value: formValues.title, onChange: handleInputChange, placeholder: "Title", className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "author", value: formValues.author, onChange: handleInputChange, placeholder: "Author", className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "genre", value: formValues.genre, onChange: handleInputChange, placeholder: "Genre", className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "holder", value: formValues.holder, onChange: handleInputChange, placeholder: "Holder", className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Add Book")))); }

Title	Author	Genre	Holder	History
1984	George Orwell	Dystopian	John Doe	John Doe
To Kill a Mockingbird	Harper Lee	Fiction	Jane Smith	Jane Smith
The Great Gatsby	F. Scott Fitzgerald	Classic	Alex Johnson	Alex Johnson