function MainComponent() { const [goalType, setGoalType] = React.useState(''); const [primaryGoal, setPrimaryGoal] = React.useState(''); const handleSelectChange = (e)=>{ setGoalType(e.target.value); }; const handleMakePrimary = (name)=>{ setPrimaryGoal(name); }; const decks = { academic: [ { name: "IELTS", subheading: "Test your English proficiency for higher education", level: "intermediate", icon: "fa fa-image" }, { name: "TOEFL", subheading: "Prepare for university admissions in English-speaking countries", level: "intermediate", icon: "fa fa-image" }, { name: "GRE", subheading: "Master the English needed for graduate school admissions", level: "advanced", icon: "fa fa-image" }, { name: "GMAT", subheading: "Excel in English for business school entrance exams", level: "advanced", icon: "fa fa-image" }, { name: "SAT", subheading: "Improve your English for college entrance exams", level: "advanced", icon: "fa fa-image" }, { name: "ACT", subheading: "Get ready for college admissions with essential English", level: "easy", icon: "fa fa-image" } ], general: [ { name: "A Holiday in England", subheading: "Be the Perfect tourist in England", level: "easy", icon: "fa fa-image" }, { name: "Business", subheading: "Become a business expert in English!", level: "intermediate", icon: "fa fa-image" }, { name: "Medical", subheading: "Learn essential English medical vocabulary!", level: "advanced", icon: "fa fa-image" }, { name: "Daily use", subheading: "Placeholder", level: "easy", icon: "fa fa-image" }, { name: "News", subheading: "Placeholder", level: "advanced", icon: "fa fa-image" }, { name: "Entertainment", subheading: "Placeholder", level: "easy", icon: "fa fa-image" }, { name: "Science", subheading: "Placeholder", level: "advanced", icon: "fa fa-image" }, { name: "History", subheading: "Placeholder", level: "intermediate", icon: "fa fa-image" }, { name: "Literature", subheading: "Placeholder", level: "intermediate", icon: "fa fa-image" } ] }; decks.all = [ ...decks.academic, ...decks.general ]; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 bg-[#F0F4F8] rounded-lg shadow-xl font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "text-center py-10 bg-[#4A90E2] text-white rounded-t-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-2xl mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Set Your Learning Goals, Master English One Step at a Time!"), /*#__PURE__*/ React.createElement("p", { className: "font-medium text-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Your journey to fluency starts here 🚀")), /*#__PURE__*/ React.createElement("section", { className: "flex justify-around items-center my-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFD700] rounded-full w-[20px] h-[20px]", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "ml-2 text-sm font-bold", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Words Started - ", /*#__PURE__*/ React.createElement("span", { className: "text-[#FFD700]", __source: { fileName: "", lineNumber: 46, columnNumber: 65 }, __self: this }, "120"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFA500] rounded-full w-[20px] h-[20px]", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "ml-2 text-sm font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Words In Progress - ", /*#__PURE__*/ React.createElement("span", { className: "text-[#FFA500]", __source: { fileName: "", lineNumber: 50, columnNumber: 69 }, __self: this }, "340"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#228B22] rounded-full w-[20px] h-[20px]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "ml-2 text-sm font-bold", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Words Mastered - ", /*#__PURE__*/ React.createElement("span", { className: "text-[#228B22]", __source: { fileName: "", lineNumber: 54, columnNumber: 66 }, __self: this }, "89")))), /*#__PURE__*/ React.createElement("section", { className: "my-8 p-4 rounded-lg bg-white shadow-sm", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-4 text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Goal Setting"), /*#__PURE__*/ React.createElement("select", { className: "block w-[50%] mx-auto py-2 px-3 mb-3 border border-gray-400 rounded", name: "goalType", onChange: handleSelectChange, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Select Goal Type"), /*#__PURE__*/ React.createElement("option", { value: "academic", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Academic"), /*#__PURE__*/ React.createElement("option", { value: "general", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "General"), /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "All")), goalType && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, decks[goalType].map((deck, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1rem)] ${primaryGoal === deck.name ? "border-[3px] border-[#00008B]" : ""}`, __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `border border-gray-300 p-4 rounded-lg shadow-sm flex flex-col items-center text-center ${primaryGoal === deck.name ? "bg-white border-[#00008B]" : "bg-white"}`, style: { minHeight: '100%' }, __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: deck.icon + " mb-2", "aria-hidden": "true", style: { alignSelf: 'center' }, __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-md font-medium", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, deck.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-4", style: { minHeight: '64px' }, __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, deck.subheading || 'Placeholder'), /*#__PURE__*/ React.createElement("div", { onMouseOver: (e)=>e.currentTarget.title = deck.level === "easy" ? "Beginner" : deck.level === "intermediate" ? "Intermediate" : "Advanced", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, Array.from({ length: 3 }, (_, i)=>i).map((i)=>/*#__PURE__*/ React.createElement("i", { key: i, className: `fa fa-bolt mr-1 ${deck.level === "easy" && i > 0 || deck.level === "intermediate" && i > 1 ? "text-gray-400" : "text-yellow-500"}`, __source: { fileName: "", lineNumber: 75, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "mt-2 py-2 px-4 rounded text-white bg-[#4A90E2]", onClick: ()=>handleMakePrimary(deck.name), __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, "Make Primary"))))))); }