function RaveMateFinder({ title, subtitle, genres }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#290742] min-h-screen flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#E3D26F] font-crimson-text text-3xl", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-[#C7C3F5] font-roboto", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, subtitle)), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "genre", className: "block text-[#E3D26F] font-roboto mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Favorite EDM Genre"), /*#__PURE__*/ React.createElement("select", { name: "genre", id: "genre", className: "form-select appearance-none block w-full bg-[#3B185F] text-[#C7C3F5] border border-[#E3D26F] rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-[#472C74]", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, genres.map((genre)=>/*#__PURE__*/ React.createElement("option", { key: genre, __source: { fileName: "", lineNumber: 12, columnNumber: 34 }, __self: this }, genre)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#E3D26F] hover:bg-[#D4C061] text-[#3B185F] font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "Find Matches"))); } function RaveMateFinderStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RaveMateFinder, { title: "RaveMate Finder", subtitle: "Connect with fellow ravers based on your favorite EDM genre!", genres: [ "House", "Trance", "Dubstep", "Drum and Bass", "Techno" ], __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement(RaveMateFinder, { title: "RaveMate Finder", subtitle: "Connect with fellow ravers based on your favorite EDM genre!", genres: [ "House", "Trance", "Dubstep", "Drum and Bass", "Techno" ], __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); }