function PuzzleGeneratorButton({ label, onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded-md font-roboto", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function PuzzleGeneratorButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PuzzleGeneratorButton, { label: "Generate Puzzle", onClick: ()=>alert('Puzzle Generated!'), __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PuzzleGeneratorButton, { label: "Create Puzzle", onClick: ()=>alert('Puzzle Creation!'), __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { const [puzzle, setPuzzle] = React.useState(null); const handleSubmit = (e)=>{ e.preventDefault(); const clues = e.target.clues.value.split('\n'); const responses = e.target.responses.value.split('\n'); const constructedPuzzle = clues.map((clue, index)=>({ clue, response: responses[index] || '' })); setPuzzle(constructedPuzzle); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "Crossword Puzzle Maker"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "clues", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Clues"), /*#__PURE__*/ React.createElement("textarea", { name: "clues", id: "clues", rows: "5", className: "w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "responses", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Responses"), /*#__PURE__*/ React.createElement("textarea", { name: "responses", id: "responses", rows: "5", className: "w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(PuzzleGeneratorButton, { label: "Generate Puzzle", onClick: handleSubmit, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg border-t border-gray-200 pt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, puzzle && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, puzzle.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, entry.clue), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-2 rounded-md", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, entry.response)))))); }