function MainComponent() { const [selectedOffer, setSelectedOffer] = React.useState(null); const [showDialog, setShowDialog] = React.useState(false); const jobOffers = [ { id: 1, title: "Frontend Developer", company: "Company A", image: "./images/company-a.jpg", location: "New York", phoneNumber: "123-456-7890", reviews: "★★★★☆", description: "Develop user-facing features for global-scale applications.", hourlyWage: "$40/hour" }, { id: 2, title: "Backend Developer", company: "Company B", image: "./images/company-b.jpg", location: "San Francisco", phoneNumber: "098-765-4321", reviews: "★★★☆☆", description: "Build and maintain server, database, and application logic.", hourlyWage: "$45/hour" }, { id: 3, title: "Full Stack Developer", company: "Company C", image: "./images/company-c.jpg", location: "Seattle", phoneNumber: "555-555-5555", reviews: "★★★★★", description: "Work across the full stack to deliver end-to-end solutions.", hourlyWage: "$50/hour" } ]; const handleApply = ()=>{ setShowDialog(true); setTimeout(()=>setShowDialog(false), 3000); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#FFD700]", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, !selectedOffer && /*#__PURE__*/ React.createElement("div", { className: "w-[90%] max-w-[600px] p-4 bg-white shadow-md rounded-lg border border-[#212121] mb-8", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-[#212121] mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Job Offers"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, jobOffers.map((offer)=>/*#__PURE__*/ React.createElement("li", { key: offer.id, className: "mb-4 bg-[#FFFFFF] p-4 shadow rounded-lg cursor-pointer", onClick: ()=>setSelectedOffer(offer), __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: offer.image, alt: `Company ${offer.company} offering a position for ${offer.title}`, className: "w-[100px] h-[100px] rounded-full", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#212121]", __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }, offer.title, " at ", offer.company), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#212121]", __source: { fileName: "", lineNumber: 58, columnNumber: 21 }, __self: this }, offer.location))))))), selectedOffer && /*#__PURE__*/ React.createElement("div", { className: "w-[90%] max-w-[600px] p-4 bg-white shadow-md rounded-lg border border-[#212121] mb-8", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedOffer.image, alt: `Company ${selectedOffer.company} offering a position for ${selectedOffer.title}`, className: "w-full h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-[#212121] mt-4 mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, selectedOffer.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#212121] mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, selectedOffer.description), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#212121]", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Location: ", selectedOffer.location), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#212121]", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Phone: ", selectedOffer.phoneNumber), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#212121]", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Reviews: ", selectedOffer.reviews), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#212121] mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Hourly Wage: ", selectedOffer.hourlyWage), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-blue-500 text-white rounded-md font-roboto", onClick: handleApply, __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Apply"), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 mt-4 bg-[#212121] text-white rounded-md font-roboto", onClick: ()=>setSelectedOffer(null), __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Back to Offers")), showDialog && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 w-full h-full flex items-center justify-center bg-[#212121] bg-opacity-50", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Application Submitted!")))); }

Job Offers

Frontend Developer at Company A

Backend Developer at Company B

Full Stack Developer at Company C