function MainComponent() { const jobSeekersList = [ { name: "Jane Doe", role: "Software Engineer", location: "New York", id: 1 }, { name: "John Smith", role: "Product Manager", location: "San Francisco", id: 2 }, { name: "Alice Johnson", role: "UX Designer", location: "Seattle", id: 3 } ]; const [selectedJobSeekerId, setSelectedJobSeekerId] = React.useState(null); const selectedJobSeeker = jobSeekersList.find((jobSeeker)=>jobSeeker.id === selectedJobSeekerId); const detailedPage = selectedJobSeeker ? { name: selectedJobSeeker.name, role: selectedJobSeeker.role, location: selectedJobSeeker.location, email: "user@example.com", about: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.", skills: [ "Skill 1", "Skill 2", "Skill 3" ], id: selectedJobSeeker.id } : null; const jobSeekersListView = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, jobSeekersList.map((jobSeeker)=>/*#__PURE__*/ React.createElement("div", { key: jobSeeker.id, onClick: ()=>setSelectedJobSeekerId(jobSeeker.id), className: "cursor-pointer p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, jobSeeker.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, jobSeeker.role, " - ", jobSeeker.location)))); const detailedPageView = detailedPage ? /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, detailedPage.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, detailedPage.role, " - ", detailedPage.location), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, detailedPage.email), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, detailedPage.about), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Skills"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, detailedPage.skills.map((skill)=>/*#__PURE__*/ React.createElement("li", { key: skill, className: "font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 47 }, __self: this }, skill)))), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "resize-none border border-gray-300 rounded-lg w-full p-2", placeholder: "Your message to the candidate", name: "scoutMessage", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white rounded-lg px-4 py-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Send Message")))) : null; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, selectedJobSeeker ? detailedPageView : jobSeekersListView); }