function MainComponent() { const [keyword, setKeyword] = React.useState(''); const [results, setResults] = React.useState([]); const fetchResults = async (keyword)=>{ const response = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: `SNS-platform-X/search?query=${keyword}`, return_text: false }) }); const data = await response.text(); const simulatedResults = [ { title: "抽出した記事 1", url: "#URL-to-article-1" }, { title: "抽出した記事 2", url: "#URL-to-article-2" } ]; setResults(simulatedResults); }; const handleSubmit = (e)=>{ e.preventDefault(); fetchResults(keyword); }; const handleReset = ()=>setKeyword(''); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-2xl mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "キーワード検索ツール"), /*#__PURE__*/ React.createElement("form", { className: "mb-10", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "keyword", placeholder: "キーワードを入力", className: "border border-gray-300 rounded-md p-3 w-1/2 font-roboto text-[#121212] focus:ring-2 focus:ring-[#007bff] transition duration-300", value: keyword, onChange: (e)=>setKeyword(e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4CAF50] text-white font-roboto py-2 px-4 rounded hover:bg-[#43a047] transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "検索"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleReset, className: "bg-grey-500 text-white font-roboto py-2 px-4 rounded hover:bg-gray-400 transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "クリア"))), /*#__PURE__*/ React.createElement("table", { className: "w-full text-left", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "記事概要"), /*#__PURE__*/ React.createElement("th", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "リンク"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("tr", { className: `${index % 2 === 0 ? 'bg-[#f2f2f2]' : 'bg-white'}`, key: index, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("td", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.url, target: "_blank", rel: "noopener noreferrer", className: "text-[#007bff] hover:text-[#0056b3]", __source: { fileName: "", lineNumber: 56, columnNumber: 47 }, __self: this }, "リンク"))))))); }