function Component({ onSubmit }) { const [name, setName] = React.useState(''); const [indoorOutdoor, setIndoorOutdoor] = React.useState(''); const [largeSmall, setLargeSmall] = React.useState(''); const [submitted, setSubmitted] = React.useState(false); const handleChange = (setter)=>(e)=>setter(e.target.value); const handleSubmit = onSubmit || (()=>{ fetch('/api/db/819', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `users_answers` (username, large_small, indoor_outdoor) VALUES (?, ?, ?)", values: [ name, largeSmall, indoorOutdoor ] }) }).then(()=>setSubmitted(true)); }); if (submitted) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#2c3e50] flex items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-[400px] p-8 shadow-lg rounded-lg text-center", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Thank you for your answers!"))); } return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#2c3e50] flex items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-[400px] p-8 shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Matching App"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-gray-700", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "w-full mt-2 p-2 border rounded", value: name, onChange: handleChange(setName), __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "indoorOutdoor", className: "block text-gray-700", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "インドアかアウトドアか"), /*#__PURE__*/ React.createElement("select", { id: "indoorOutdoor", name: "indoorOutdoor", className: "w-full mt-2 p-2 border rounded", value: indoorOutdoor, onChange: handleChange(setIndoorOutdoor), __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "indoor", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "インドア"), /*#__PURE__*/ React.createElement("option", { value: "outdoor", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "アウトドア"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "largeSmall", className: "block text-gray-700", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "大人数か少人数か"), /*#__PURE__*/ React.createElement("select", { id: "largeSmall", name: "largeSmall", className: "w-full mt-2 p-2 border rounded", value: largeSmall, onChange: handleChange(setLargeSmall), __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "large", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "大人数"), /*#__PURE__*/ React.createElement("option", { value: "small", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "少人数"))), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Submit"))); } function ComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this })); } function Component2({ children }) { const handleKeydown = (event)=>{ if (window.navigator.platform.includes('Win') && event.ctrlKey && event.key === '1') { fetch('/api/db/819', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `users_answers`' }) }).then(()=>{ window.location.reload(); }); } }; React.useEffect(()=>{ window.addEventListener('keydown', handleKeydown); return ()=>{ window.removeEventListener('keydown', handleKeydown); }; }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#2c3e50] h-screen flex items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, children); } function Component2Story() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component2, { __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Your content here"))); } function MainComponent() { const [showComponent, setShowComponent] = React.useState(false); const handleKeydown = (event)=>{ if (window.navigator.platform.includes('Win') && event.ctrlKey && event.key === '2') { setShowComponent(true); } }; React.useEffect(()=>{ window.addEventListener('keydown', handleKeydown); return ()=>{ window.removeEventListener('keydown', handleKeydown); }; }, []); return /*#__PURE__*/ React.createElement(Component2, { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, showComponent && /*#__PURE__*/ React.createElement(Component2, { __source: { fileName: "", lineNumber: 20, columnNumber: 27 }, __self: this }))); }