function MainComponent() { const [idiom, setIdiom] = React.useState(''); const [meaning, setMeaning] = React.useState(''); const [origin, setOrigin] = React.useState(''); const [searched, setSearched] = React.useState(false); const searchIdiom = async (e)=>{ e.preventDefault(); if (idiom === "花鳥風月") { setMeaning("The beauty of nature"); setOrigin("Derived from a Chinese idiom implying appreciation of the subtle and sublime beauty of nature."); } else { setMeaning("No data found"); setOrigin(""); } setSearched(true); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#F0F4F8]", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "熟語検索サイト"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center w-full max-w-md", onSubmit: searchIdiom, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "idiom", placeholder: "熟語を入力", className: "form-input w-full p-4 mb-4 rounded border border-gray-300", value: idiom, onChange: (e)=>setIdiom(e.target.value), __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "https://example.com/search", target: "_blank", rel: "noreferrer", className: "block w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "検索")), searched && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full max-w-md mt-8", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#333]", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "意味"), /*#__PURE__*/ React.createElement("p", { className: "text-[#333] mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, meaning), origin && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-[#333]", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "成り立ち"), /*#__PURE__*/ React.createElement("p", { className: "text-[#333]", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, origin)))); }