function SelfGuidedDrivingTours({ topUsCities }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-red-500 to-yellow-500 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Self-Guided Driving Tours App"), /*#__PURE__*/ React.createElement("input", { name: "search", className: "w-full max-w-md p-2 border border-gray-300 rounded-md mb-8 placeholder-gray-500", placeholder: "Search for tours...", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-md list-inside mb-8 overflow-y-auto h-40", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, topUsCities.map((city)=>/*#__PURE__*/ React.createElement("li", { key: city, className: "font-roboto text-sm text-[#666] py-1", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, city))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 px-4 bg-[#4285F4] text-white font-roboto rounded-md focus:outline-none focus:ring-2 focus:ring-[#4285F4] focus:ring-opacity-50 mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Use as Guest"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "username", className: "w-full p-2 border border-gray-300 rounded-md", placeholder: "Username", required: true, __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", className: "w-full p-2 border border-gray-300 rounded-md", placeholder: "Password", pattern: "(?=.*\\d)(?=.*[a-z])(?=.*[\\W_]).{8,}", required: true, __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-[#34A853] text-white font-roboto rounded-md focus:outline-none focus:ring-2 focus:ring-[#34A853] focus:ring-opacity-50", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Create Account"))))); } function SelfGuidedDrivingToursStory() { const topUsCities = [ "New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "San Diego", "Dallas", "San Jose", "Austin", "Jacksonville", "Fort Worth", "Columbus", "Charlotte", "San Francisco", "Indianapolis", "Seattle", "Denver", "Washington", "Boston", "El Paso", "Detroit", "Nashville", "Portland", "Memphis", "Oklahoma City", "Las Vegas", "Louisville", "Baltimore", "Milwaukee", "Albuquerque", "Tucson", "Fresno", "Mesa", "Sacramento", "Atlanta", "Kansas City", "Colorado Springs", "Miami", "Raleigh", "Omaha", "Long Beach", "Virginia Beach", "Oakland", "Minneapolis", "Tulsa", "Arlington", "Tampa", "New Orleans" ]; return /*#__PURE__*/ React.createElement(SelfGuidedDrivingTours, { topUsCities: topUsCities, __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }); } function MainComponent() { const promotedTours = [ { city: "Auburn, CA", link: "/auburn-ca-tours" }, { city: "Lincoln, CA", link: "/lincoln-ca-tours" }, { city: "Sacramento, CA", link: "/sacramento-ca-tours" } ]; return /*#__PURE__*/ React.createElement(SelfGuidedDrivingTours, { topUsCities: promotedTours.map((tour)=>tour.city), __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }); }