function MainComponent() { const [books, setBooks] = React.useState([]); const [bookName, setBookName] = React.useState(''); const [authorName, setAuthorName] = React.useState(''); const [publisher, setPublisher] = React.useState(''); const [publishDate, setPublishDate] = React.useState(''); const [country, setCountry] = React.useState(''); const [category, setCategory] = React.useState(''); const handleAddBook = ()=>{ if (!bookName || !authorName || !publisher || !publishDate || !country || !category) return; const newBook = { bookName, authorName, publisher, publishDate, country, category }; setBooks([ ...books, newBook ]); setBookName(''); setAuthorName(''); setPublisher(''); setPublishDate(''); setCountry(''); setCategory(''); }; const handleDeleteBook = (index)=>{ const newBooks = books.filter((_, i)=>i !== index); setBooks(newBooks); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#f9f7f7] flex flex-col items-center pt-10", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#112d4e] text-3xl mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "📚 المكتبة الإلكترونية"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#112d4e] font-roboto text-sm mb-2", htmlFor: "bookName", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "اسم الكتاب"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#3f72af] leading-tight focus:outline-none focus:shadow-outline", type: "text", name: "bookName", placeholder: "أدخل اسم الكتاب", value: bookName, onChange: (e)=>setBookName(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#112d4e] font-roboto text-sm mb-2", htmlFor: "authorName", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "اسم المؤلف"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#3f72af] leading-tight focus:outline-none focus:shadow-outline", type: "text", name: "authorName", placeholder: "أدخل اسم المؤلف", value: authorName, onChange: (e)=>setAuthorName(e.target.value), __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#112d4e] font-roboto text-sm mb-2", htmlFor: "publisher", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "دار النشر"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#3f72af] leading-tight focus:outline-none focus:shadow-outline", type: "text", name: "publisher", placeholder: "أدخل دار النشر", value: publisher, onChange: (e)=>setPublisher(e.target.value), __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#112d4e] font-roboto text-sm mb-2", htmlFor: "publishDate", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "تاريخ النشر"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#3f72af] leading-tight focus:outline-none focus:shadow-outline", type: "date", name: "publishDate", value: publishDate, onChange: (e)=>setPublishDate(e.target.value), __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#112d4e] font-roboto text-sm mb-2", htmlFor: "country", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "الدولة"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#3f72af] leading-tight focus:outline-none focus:shadow-outline", type: "text", name: "country", placeholder: "أدخل الدولة", value: country, onChange: (e)=>setCountry(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#112d4e] font-roboto text-sm mb-2", htmlFor: "category", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "الفئة"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#3f72af] leading-tight focus:outline-none focus:shadow-outline", type: "text", name: "category", placeholder: "أدخل الفئة", value: category, onChange: (e)=>setCategory(e.target.value), __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#3f72af] hover:bg-[#112d4e] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleAddBook, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "إضافة")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full max-w-4xl", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border-b font-roboto text-[#112d4e] px-4 py-2 text-left", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "اسم الكتاب"), /*#__PURE__*/ React.createElement("th", { className: "border-b font-roboto text-[#112d4e] px-4 py-2 text-left", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "اسم المؤلف"), /*#__PURE__*/ React.createElement("th", { className: "border-b font-roboto text-[#112d4e] px-4 py-2 text-left", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "دار النشر"), /*#__PURE__*/ React.createElement("th", { className: "border-b font-roboto text-[#112d4e] px-4 py-2 text-left", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "تاريخ النشر"), /*#__PURE__*/ React.createElement("th", { className: "border-b font-roboto text-[#112d4e] px-4 py-2 text-left", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "الدولة"), /*#__PURE__*/ React.createElement("th", { className: "border-b font-roboto text-[#112d4e] px-4 py-2 text-left", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "الفئة"), /*#__PURE__*/ React.createElement("th", { className: "border-b font-roboto text-[#112d4e] px-4 py-2 text-left", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "أفعال"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, books.map((book, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border-b font-roboto text-[#3f72af] px-4 py-2", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, book.bookName), /*#__PURE__*/ React.createElement("td", { className: "border-b font-roboto text-[#3f72af] px-4 py-2", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, book.authorName), /*#__PURE__*/ React.createElement("td", { className: "border-b font-roboto text-[#3f72af] px-4 py-2", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, book.publisher), /*#__PURE__*/ React.createElement("td", { className: "border-b font-roboto text-[#3f72af] px-4 py-2", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, book.publishDate), /*#__PURE__*/ React.createElement("td", { className: "border-b font-roboto text-[#3f72af] px-4 py-2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, book.country), /*#__PURE__*/ React.createElement("td", { className: "border-b font-roboto text-[#3f72af] px-4 py-2", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, book.category), /*#__PURE__*/ React.createElement("td", { className: "border-b font-roboto text-[#3f72af] px-4 py-2", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#f9f7f7] text-[#112d4e] hover:bg-[#3f72af] hover:text-white font-bold py-1 px-3 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: ()=>handleDeleteBook(index), __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "حذف")))))))); }