function MainComponent() { const [platform, setPlatform] = React.useState(''); const [searchTerm, setSearchTerm] = React.useState(''); const [results, setResults] = React.useState([]); const handleSearchChange = (e)=>{ setSearchTerm(e.target.value); }; const handlePlatformChange = (e)=>{ setPlatform(e.target.value); }; const handleSearch = (e)=>{ e.preventDefault(); const filteredResults = mockResults.filter((result)=>(platform ? result.platform === platform : true) && (searchTerm ? result.name.toLowerCase().includes(searchTerm.toLowerCase()) : true)); setResults(filteredResults); }; const mockResults = [ { id: 1, name: "Influencer A", followers: "1M", image: "./images/avatar1.jpg", platform: "Instagram" }, { id: 2, name: "Influencer B", followers: "500K", image: "./images/avatar2.jpg", platform: "YouTube" }, { id: 3, name: "Influencer C", followers: "2M", image: "./images/avatar3.jpg", platform: "X" }, { id: 4, name: "Influencer D", followers: "800K", image: "./images/avatar4.jpg", platform: "TikTok" } ]; React.useEffect(()=>{ setResults(mockResults); }, []); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen overflow-hidden bg-[#f0f2f5] flex flex-col", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1877F2] h-20 flex justify-center items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-roboto text-2xl", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "インフルエンサー検索結果画面")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full max-w-[600px] mx-auto shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "space-y-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "platform", value: platform, onChange: handlePlatformChange, className: "w-full rounded-md bg-gray-50 p-2 focus:outline-none", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "プラットフォームを選択..."), /*#__PURE__*/ React.createElement("option", { value: "Instagram", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "Instagram"), /*#__PURE__*/ React.createElement("option", { value: "X", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "X"), /*#__PURE__*/ React.createElement("option", { value: "YouTube", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "YouTube"), /*#__PURE__*/ React.createElement("option", { value: "TikTok", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "TikTok"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "searchTerm", value: searchTerm, onChange: handleSearchChange, placeholder: "検索...", className: "w-full rounded-md bg-gray-50 p-2 focus:outline-none", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#1877F2] text-white rounded-md px-6 py-2 hover:bg-[#145dbf]", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "検索")))), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, results.map((result)=>/*#__PURE__*/ React.createElement("div", { key: result.id, className: "bg-white rounded-lg p-4 shadow flex flex-col items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: result.image, alt: `Profile of ${result.name}`, className: "w-24 h-24 rounded-full", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-center", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, result.name), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, result.followers, " followers"), /*#__PURE__*/ React.createElement("div", { className: "mt-1 text-gray-400 text-sm", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, result.platform))))))); }