function MainComponent() { const [currentEvent, setCurrentEvent] = React.useState('Floor'); const [currentLevel, setCurrentLevel] = React.useState(2); const [skillName, setSkillName] = React.useState(''); const [sets, setSets] = React.useState(''); const [reps, setReps] = React.useState(''); const [numberAttempted, setNumberAttempted] = React.useState(''); const [numberCompleted, setNumberCompleted] = React.useState(''); const [corrections, setCorrections] = React.useState(''); const [date, setDate] = React.useState(''); const events = [ 'Bars', 'Beam', 'Vault', 'Floor' ]; const renderSkillsByEventAndLevel = (event, level)=>{ const skills = { Floor: { 2: [ "Handstand", "Bridge", "Kickover", "Half Turn", "Cartwheel", "Round-off", "Forward Roll", "Backward Roll", "Handstand Forward Roll" ], 3: [ "Back Extension Roll", "Handstand", "Back Walkover" ], 4: [ "Full Turn", "Front Walkover", "Front Handspring", "Cartwheel Step in", "Roundoff", "BackHandspring x2", "Roundoff BackHandspring", "Back Extension Roll Pushup" ], 5: [ "Handstand Pirouette", "Back Handspring", "Aerial Cartwheel", "Front Tuck", "Back Tuck", "Back Pike", "Back Layout", "Front Pike", "Front Layout", "Back Layout 1/2", "Back Layout 1/1" ] }, Bars: {}, Beam: {}, Vault: {} }; return skills[event]?.[level] || []; }; const renderCheckboxes = (count = 10)=>{ return Array.from({ length: count }, (_, index)=>/*#__PURE__*/ React.createElement("input", { key: index, type: "checkbox", className: "border mr-1", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this })); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-around mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, events.map((event)=>/*#__PURE__*/ React.createElement("button", { key: event, onClick: ()=>setCurrentEvent(event), className: `p-2 ${currentEvent === event ? 'bg-blue-500 text-white' : 'bg-transparent text-[#000] border'}`, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, event))), /*#__PURE__*/ React.createElement("select", { name: "level", value: currentLevel, onChange: (e)=>setCurrentLevel(e.target.value), className: "border p-2 mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, Array.from({ length: 9 }, (_, i)=>i + 2).map((level)=>/*#__PURE__*/ React.createElement("option", { key: level, value: level, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Level ", level))), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "Skill List for ", currentEvent, " Level ", currentLevel), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, renderSkillsByEventAndLevel(currentEvent, currentLevel).map((skill, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b py-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, skill, " ", renderCheckboxes()))), /*#__PURE__*/ React.createElement("form", { className: "grid grid-cols-1 gap-4 mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "date", type: "date", value: date, onChange: (e)=>setDate(e.target.value), className: "border p-2", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "skillName", placeholder: "Skill Name", value: skillName, onChange: (e)=>setSkillName(e.target.value), className: "border p-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "sets", placeholder: "Sets", value: sets, onChange: (e)=>setSets(e.target.value), type: "number", className: "border p-2", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), renderCheckboxes(3), /*#__PURE__*/ React.createElement("input", { name: "reps", placeholder: "Reps", value: reps, onChange: (e)=>setReps(e.target.value), type: "number", className: "border p-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), renderCheckboxes(3)), /*#__PURE__*/ React.createElement("input", { name: "numberAttempted", placeholder: "Number Attempted", value: numberAttempted, onChange: (e)=>setNumberAttempted(e.target.value), className: "border p-2", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "numberCompleted", placeholder: "Number Completed", value: numberCompleted, onChange: (e)=>setNumberCompleted(e.target.value), className: "border p-2", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "corrections", placeholder: "Corrections", value: corrections, onChange: (e)=>setCorrections(e.target.value), className: "border p-2 h-[100px]", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }))); }

Skill List for Floor Level 2