function MainComponent() { const [plot, setPlot] = useState(""); const [races, setRaces] = useState([ { name: "", description: "", alignment: "", location: "" } ]); const [mainCharacter, setMainCharacter] = useState(""); const [generatedNovel, setGeneratedNovel] = useState(""); const handleRaceChange = (index, field, value)=>{ const newRaces = [ ...races ]; newRaces[index][field] = value; setRaces(newRaces); }; const addRace = ()=>{ setRaces([ ...races, { name: "", description: "", alignment: "", location: "" } ]); }; const generateNovel = ()=>{ // This function is a placeholder for the generation logic setGeneratedNovel(`Novel Plot:\n${plot}\n\nRaces:\n${races.map((race)=>`Name: ${race.name}, Description: ${race.description}, Alignment: ${race.alignment}, Location: ${race.location}`).join("\n")}\n\nMain Character:\n${mainCharacter}`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-auto", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Plot"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-40 p-2 border border-gray-300", name: "plot", value: plot, onChange: (e)=>setPlot(e.target.value), __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-lg mt-4 mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Main Character"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-24 p-2 border border-gray-300", name: "mainCharacter", value: mainCharacter, onChange: (e)=>setMainCharacter(e.target.value), __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Races"), races.map((race, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "grid grid-cols-4 gap-2 mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 col-span-1", name: "name", placeholder: "Name", value: race.name, onChange: (e)=>handleRaceChange(index, 'name', e.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 col-span-1", name: "description", placeholder: "Description", value: race.description, onChange: (e)=>handleRaceChange(index, 'description', e.target.value), __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 col-span-1", name: "alignment", placeholder: "Alignment", value: race.alignment, onChange: (e)=>handleRaceChange(index, 'alignment', e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 col-span-1", name: "location", placeholder: "Location", value: race.location, onChange: (e)=>handleRaceChange(index, 'location', e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "mb-4 mt-2 py-2 px-4 bg-blue-500 text-white", onClick: addRace, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "+ Add Race"))), /*#__PURE__*/ React.createElement("button", { className: "py-3 bg-green-500 text-white", onClick: generateNovel, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "Generate Novel"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 overflow-auto", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Generated Novel"), /*#__PURE__*/ React.createElement("pre", { __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, generatedNovel)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `)); }