function MainComponent({ jobSeekers, onContact }) { const [searchTerm, setSearchTerm] = React.useState(""); const filteredJobSeekers = jobSeekers.filter((jobSeeker)=>jobSeeker.industry.includes(searchTerm) || jobSeeker.location.includes(searchTerm) || jobSeeker.experience.includes(searchTerm)); return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-[#f4f4f4] p-8", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-8", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#5E6347]", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "企業と求職者をつなぐ人材紹介業"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#8A775A]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "企業側が求職者を確認し、問い合わせできるシンプルでプロフェッショナルなサイト")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), placeholder: "検索...", className: "w-full p-2 border border-[#ccc] rounded", name: "search", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, filteredJobSeekers.map(({ id, name, industry, location, experience })=>/*#__PURE__*/ React.createElement("li", { key: id, className: "bg-white p-4 mb-4 shadow rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "業種: ", industry), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "希望勤務地: ", location), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "経験: ", experience), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onContact(id), className: "mt-2 py-2 px-4 bg-[#5E6347] text-white rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "問い合わせ"))))); } function StoryComponent() { const jobSeekers = [ { id: 1, name: "山田太郎", industry: "建築", location: "東京", experience: "5年" }, { id: 2, name: "佐藤花子", industry: "土木", location: "大阪", experience: "3年" } ]; const handleContact = (id)=>{ alert(`問い合わせ ID: ${id}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { jobSeekers: jobSeekers, onContact: handleContact, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this })); }

山田 太郎

佐藤 花子

山田太郎

佐藤花子