function MainComponent() { const [isPlaying, setIsPlaying] = React.useState(false); function handlePlayInterval() { setIsPlaying(true); setTimeout(()=>setIsPlaying(false), 2000); // mock playing interval for 2 seconds } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F0F3] p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#334155] font-bold font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Music Theory Assistant"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#475569] font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Quickly find scales, chords, and more")), /*#__PURE__*/ React.createElement("main", { className: "w-full max-w-4xl", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-10", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-[#334155] font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Find a Scale"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "scaleNote", placeholder: "Enter Root Note", className: "flex-1 p-2 border border-[#D1D5DB] rounded-md font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "scaleType", className: "flex-1 p-2 border border-[#D1D5DB] rounded-md font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "major", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Major"), /*#__PURE__*/ React.createElement("option", { value: "minor", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Minor"), /*#__PURE__*/ React.createElement("option", { value: "pentatonic", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Pentatonic")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-[#3B82F6] text-white rounded-md font-roboto transition duration-150 ease-in-out hover:bg-[#2563EB]", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Find Scale"))), /*#__PURE__*/ React.createElement("section", { className: "mb-10", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-[#334155] font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Chord Progressions"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chordKey", placeholder: "Enter Key", className: "flex-1 p-2 border border-[#D1D5DB] rounded-md font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "chordQuality", className: "flex-1 p-2 border border-[#D1D5DB] rounded-md font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "major", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Major"), /*#__PURE__*/ React.createElement("option", { value: "minor", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Minor")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-[#10B981] text-white rounded-md font-roboto transition duration-150 ease-in-out hover:bg-[#059669]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Find Progressions"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-[#334155] font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Interval Ear Training"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePlayInterval, className: `p-4 bg-[#F97316] text-white rounded-full font-roboto transition duration-150 ease-in-out hover:bg-[#EA580C] ${isPlaying ? 'animate-pulse' : ''}`, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Play Interval"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-32 py-2 bg-[#E2E8F0] text-[#475569] rounded-md font-roboto transition duration-150 ease-in-out hover:bg-[#CBD5E1]", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Minor 2nd"), /*#__PURE__*/ React.createElement("button", { className: "w-32 py-2 bg-[#E2E8F0] text-[#475569] rounded-md font-roboto transition duration-150 ease-in-out hover:bg-[#CBD5E1]", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "Major 3rd"), /*#__PURE__*/ React.createElement("button", { className: "w-32 py-2 bg-[#E2E8F0] text-[#475569] rounded-md font-roboto transition duration-150 ease-in-out hover:bg-[#CBD5E1]", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "Perfect 5th"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } `)); }