function MainComponent() { const [mangaList, setMangaList] = React.useState([]); const [title, setTitle] = React.useState(''); const [source, setSource] = React.useState(''); const [volume, setVolume] = React.useState(''); const [chapter, setChapter] = React.useState(''); const [rating, setRating] = React.useState(0); const addManga = (event)=>{ event.preventDefault(); if (!title || !source || !volume && !chapter || rating === 0) return; const newManga = { title, source, volume, chapter, rating }; setMangaList([ ...mangaList, newManga ]); setTitle(''); setSource(''); setVolume(''); setChapter(''); setRating(0); }; const handleTitleChange = (event)=>{ setTitle(event.target.value); }; const handleSourceChange = (event)=>{ setSource(event.target.value); }; const handleVolumeChange = (event)=>{ setVolume(event.target.value); }; const handleChapterChange = (event)=>{ setChapter(event.target.value); }; const handleRatingChange = (event)=>{ setRating(event.target.value); }; const mangaEntries = mangaList.map((manga, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col sm:flex-row items-center justify-between p-2 bg-[#1e293b] mb-2 rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg text-white", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, manga.title, " - ", manga.source), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-400", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, manga.volume ? `Volume: ${manga.volume}` : `Chapter: ${manga.chapter}`)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, [ ...Array.from({ length: 5 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("span", { key: i, className: `fa fa-star text-${i < manga.rating ? 'yellow' : 'gray'}-400`, __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }))))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto container mx-auto p-4 bg-[#0f172a] min-h-screen text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Manga Tracker"), /*#__PURE__*/ React.createElement("form", { onSubmit: addManga, className: "mb-6", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", value: title, onChange: handleTitleChange, placeholder: "Manga Title", className: "bg-[#334155] border-2 rounded px-3 py-2 mr-2 w-full sm:w-auto mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "source", value: source, onChange: handleSourceChange, placeholder: "Source", className: "bg-[#334155] border-2 rounded px-3 py-2 mr-2 w-full sm:w-auto mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "volume", value: volume, onChange: handleVolumeChange, placeholder: "Volume (optional)", className: "bg-[#334155] border-2 rounded px-3 py-2 mr-2 w-full sm:w-auto mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "chapter", value: chapter, onChange: handleChapterChange, placeholder: "Chapter (optional)", className: "bg-[#334155] border-2 rounded px-3 py-2 mr-2 w-full sm:w-auto mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", name: "rating", value: rating, onChange: handleRatingChange, min: "0", max: "5", className: "w-full sm:w-auto mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#2563eb] rounded px-4 py-2", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, "Add Manga")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, mangaEntries)); }