function ActivityCard({ image, title, location, rating }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-white shadow-md max-w-sm overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[200px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `${title} activity`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-gray-600 mr-2", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, location)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-yellow-400", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto ml-2", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, rating, "/5")))); } function ActivityCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ActivityCard, { image: "/images/hiking.jpg", title: "Mountain Hiking Adventure", location: "Rocky Mountains, Colorado", rating: "4.8", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ActivityCard, { image: "/images/surfing.jpg", title: "Beginner Surf Lessons", location: "Waikiki Beach, Hawaii", rating: "4.5", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ActivityCard, { image: "/images/cooking.jpg", title: "Italian Cooking Class", location: "Little Italy, New York", rating: "4.9", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MapView({ center = { lat: 40.7128, lng: -74.006 }, activities = [ { id: 1, title: "Yoga in the Park", location: { lat: 40.7129, lng: -74.0061 }, time: "8:00 AM", type: "activity" }, { id: 2, title: "Street Festival", location: { lat: 40.7127, lng: -74.0059 }, time: "2:00 PM", type: "event" } ] }) { const mapRef = useRef(null); const [location, setLocation] = useState(center); const [selectedItem, setSelectedItem] = useState(null); useEffect(()=>{ if (!mapRef.current) { const map = new google.maps.Map(mapRef.current, { center: location, zoom: 14, styles: [ { featureType: "all", elementType: "all", stylers: [ { saturation: -100 } ] } ] }); activities.forEach((item)=>{ const marker = new google.maps.Marker({ position: item.location, map: map, icon: { url: item.type === "activity" ? "/activity-marker.png" : "/event-marker.png", scaledSize: new google.maps.Size(30, 30) } }); marker.addListener("click", ()=>{ setSelectedItem(item); }); }); } }, [ location, activities ]); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavBar, { __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { ref: mapRef, className: "w-full h-[calc(100vh-64px)]", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }), selectedItem && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-[400px] bg-white rounded-lg shadow-lg p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, selectedItem.type === "activity" ? /*#__PURE__*/ React.createElement(React.Fragment, null) : /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedItem(null), className: "absolute top-2 right-2 text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.geolocation.getCurrentPosition((position)=>setLocation({ lat: position.coords.latitude, lng: position.coords.longitude })); }, className: "absolute top-20 right-4 bg-white p-2 rounded-full shadow-lg", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-location-arrow", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }))); } function MapViewStory() { const sampleData = { center: { lat: 40.7128, lng: -74.006 }, activities: [ { id: 1, title: "Morning Yoga", location: { lat: 40.7129, lng: -74.0061 }, time: "8:00 AM", type: "activity" }, { id: 2, title: "Local Festival", location: { lat: 40.7127, lng: -74.0059 }, time: "2:00 PM", type: "event" } ] }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MapView, { ...sampleData, __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this })); } function EventCard({ title, date, time, location, price, imageUrl, onBook }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-lg bg-white max-w-sm", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl || "/event-placeholder.jpg", alt: "Event venue", className: "w-full h-[200px] object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-alt text-gray-600 w-6", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, date)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-gray-600 w-6", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, time)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-gray-600 w-6", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, location)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ticket-alt text-gray-600 w-6", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "$", price))), /*#__PURE__*/ React.createElement("button", { onClick: onBook, className: "w-full bg-[#121212] text-white font-roboto py-2 px-4 rounded hover:bg-gray-800 transition-colors", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Book Now"))); } function EventCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EventCard, { title: "Summer Music Festival", date: "July 15, 2024", time: "7:00 PM", location: "Central Park, New York", price: "49.99", imageUrl: "/summer-festival.jpg", onBook: ()=>alert("Booking started!"), __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(EventCard, { title: "Tech Conference 2024", date: "August 20, 2024", time: "9:00 AM", location: "Convention Center, San Francisco", price: "199.99", imageUrl: "/tech-conference.jpg", onBook: ()=>alert("Booking started!"), __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); } function NavBar() { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#121212] p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-roboto text-2xl mb-4 md:mb-0", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Logo"), /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-white font-roboto hover:text-gray-300", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }), "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/events", className: "text-white font-roboto hover:text-gray-300", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar mr-2", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }), "Events")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/map", className: "text-white font-roboto hover:text-gray-300", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }), "Map")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "text-white font-roboto hover:text-gray-300", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }), "Profile")))))); } function NavBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavBar, { __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedEvent, setSelectedEvent] = useState(null); const [view, setView] = useState("map"); const activities = [ { image: "/images/hiking.jpg", title: "Mountain Trail Hike", location: "Rocky Mountain Park", rating: "4.7" }, { image: "/images/yoga.jpg", title: "Sunset Yoga", location: "Beach Front", rating: "4.9" } ]; const events = [ { title: "Local Food Festival", date: "March 15, 2024", time: "12:00 PM", location: "Downtown Square", price: "25.00", imageUrl: "/food-festival.jpg" }, { title: "Art Gallery Opening", date: "March 20, 2024", time: "7:00 PM", location: "Modern Art Museum", price: "15.00", imageUrl: "/art-gallery.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavBar, { __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setView("map"), className: `px-4 py-2 font-roboto rounded ${view === "map" ? "bg-[#121212] text-white" : "bg-white"}`, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), "Map View"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setView("list"), className: `px-4 py-2 font-roboto rounded ${view === "list" ? "bg-[#121212] text-white" : "bg-white"}`, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-list mr-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }), "List View")), view === "map" ? /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4 h-[600px]", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, activities.map((activity, index)=>/*#__PURE__*/ React.createElement(ActivityCard, { key: `activity-${index}`, ...activity, __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this })), events.map((event, index)=>/*#__PURE__*/ React.createElement(EventCard, { key: `event-${index}`, ...event, onBook: ()=>alert("Booking started!"), __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }))))); }