function MainComponent({ page, media, profileData, volunteerOpportunities, isLoggedIn }) { const sections = [ "North East", "Central East", "South East", "South", "North West", "Central West", "South West" ]; let content; if (page === "map") { content = /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[500px] bg-gray-200", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "florida-coastline.png", alt: "Florida Coastline", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }), sections.map((section, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `border ${section.toLowerCase().replace(" ", "-")}`, __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, section))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 flex items-center space-x-2", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-2xl text-[#FFC300]", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-satellite-dish text-2xl text-[#FFC300]", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }))); } else if (page === "upload") { content = isLoggedIn ? /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] mx-auto p-4 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "mediaFile", className: "w-full", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "description", placeholder: "Description", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#FFC300] text-white p-2 rounded", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Upload"))) : /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] mx-auto p-4 bg-white rounded shadow-md text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Must be logged in to upload")); } else if (page === "profile") { content = isLoggedIn ? /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] mx-auto p-4 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, profileData.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, profileData.email)), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, profileData.media.map((item, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "border p-2 rounded", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.thumbnail, alt: `Uploaded on ${item.date}`, className: "w-full h-[100px] object-cover", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, item.description), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, item.date))))) : /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] mx-auto p-4 bg-white rounded shadow-md text-center", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Must be logged in to view profile")); } else if (page === "volunteer") { content = isLoggedIn ? /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto p-4 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Volunteer Opportunities"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, volunteerOpportunities.map((opportunity, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "p-4 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, opportunity.location), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Date: ", opportunity.date), /*#__PURE__*/ React.createElement("button", { className: "mt-2 w-full bg-[#FFC300] text-white p-2 rounded", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "Sign Up"))))) : /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] mx-auto p-4 bg-white rounded shadow-md text-center", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Must be logged in to view volunteer opportunities")); } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, content, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, ` .north-east { top: 10%; left: 5%; width: 20%; height: 20%; } .central-east { top: 35%; left: 5%; width: 20%; height: 20%; } .south-east { top: 60%; left: 5%; width: 20%; height: 20%; } .south { top: 85%; left: 5%; width: 20%; height: 20%; } .north-west { top: 10%; right: 5%; width: 20%; height: 20%; } .central-west { top: 35%; right: 5%; width: 20%; height: 20%; } .south-west { top: 60%; right: 5%; width: 20%; height: 20%; } `)); } function StoryComponent() { const profileData = { name: "John Doe", email: "johndoe@example.com", media: [ { thumbnail: "path/to/thumb1.jpg", description: "Beach Cleanup 2021", date: "2021-06-15" }, { thumbnail: "path/to/thumb2.jpg", description: "Coral Reef Restoration 2022", date: "2022-03-23" } ] }; const volunteerOpportunities = [ { location: "Miami Beach", date: "2023-11-15" }, { location: "Key West", date: "2023-12-09" } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-12", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { page: "map", isLoggedIn: false, __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "upload", isLoggedIn: false, __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "profile", profileData: profileData, isLoggedIn: false, __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "volunteer", volunteerOpportunities: volunteerOpportunities, isLoggedIn: false, __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "map", isLoggedIn: true, __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "upload", isLoggedIn: true, __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "profile", profileData: profileData, isLoggedIn: true, __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "volunteer", volunteerOpportunities: volunteerOpportunities, isLoggedIn: true, __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this })); }