function MainComponent() { const locations = [ { src: "relative/path/to/restaurant1.jpg", alt: "Delicious dish at a restaurant", link: "https://www.instagram.com/restaurant1", tag: "restaurant" }, { src: "relative/path/to/fashion1.jpg", alt: "Stylish clothing item", link: "https://www.instagram.com/fashion1", tag: "fashion" }, { src: "relative/path/to/restaurant2.jpg", alt: "Yummy food at a restaurant", link: "https://www.instagram.com/restaurant2", tag: "restaurant" }, { src: "relative/path/to/fashion2.jpg", alt: "Chic fashion wear", link: "https://www.instagram.com/fashion2", tag: "fashion" }, { src: "relative/path/to/hotel1.jpg", alt: "Luxurious hotel lobby", link: "https://www.instagram.com/hotel1", tag: "hotel" }, { src: "relative/path/to/scenery1.jpg", alt: "Beautiful scenery", link: "https://www.instagram.com/scenery1", tag: "scenery" } ]; const tags = [ "all", "restaurant", "fashion", "hotel", "scenery" ]; const [selectedTag, setSelectedTag] = React.useState("all"); const filteredLocations = selectedTag === "all" ? locations : locations.filter((location)=>location.tag === selectedTag); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-6xl py-8 px-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center font-roboto mb-6 text-[#121212]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Explore Locations"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, tags.map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag, className: `px-4 py-2 mx-2 rounded-full border ${selectedTag === tag ? 'bg-[#121212] text-white' : 'bg-white text-[#121212]'}`, onClick: ()=>setSelectedTag(tag), __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, tag))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-6 mb-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, filteredLocations.map((location, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: location.link, target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: location.src, alt: location.alt, className: "w-full h-[300px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[500px] bg-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { title: "Google Map", src: "https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d126742.36577443704!2d139.6917068!3d35.6894875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2sm0!5e0!3m2!1sen!2sjp!4v1635295483617!5m2!1sen!2sjp", className: "w-full h-full rounded-lg", allowFullScreen: "", loading: "lazy", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this })))); }