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 [activities] = useState([ { title: "Mountain Biking", description: "Explore scenic trails through the mountains", image: "/images/biking.jpg", difficulty: "Intermediate" }, { title: "Rock Climbing", description: "Challenge yourself on natural rock formations", image: "/images/climbing.jpg", difficulty: "Advanced" }, { title: "Hiking", description: "Peaceful nature walks on marked trails", image: "/images/hiking.jpg", difficulty: "Beginner" } ]); const [events] = useState([ { title: "Summer Music Festival", date: "July 15, 2024", location: "Central Park", image: "/images/festival.jpg" }, { title: "Food & Wine Tasting", date: "August 5, 2024", location: "Downtown Square", image: "/images/food-tasting.jpg" }, { title: "Art Exhibition", date: "June 30, 2024", location: "City Gallery", image: "/images/art.jpg" } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavBar, { __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-12", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-roboto font-bold mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Recommended Activities"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, activities.map((activity, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("section", { className: "mb-12", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-roboto font-bold mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Featured Events"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, events.map((event, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-roboto font-bold mb-6", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Explore Nearby"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px]", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))))); }