function MainComponent() { const [semesters, setSemesters] = React.useState([ { semesterNo: 1, subjects: [ { subject: '', grade: '', credit: '' } ] } ]); const addSemester = ()=>{ setSemesters([ ...semesters, { semesterNo: semesters.length + 1, subjects: [ { subject: '', grade: '', credit: '' } ] } ]); }; const handleSubjectChange = (event, index, sIndex)=>{ const newSemesters = semesters.map((sem, i)=>{ if (i === index) { const updatedSubjects = sem.subjects.map((subject, si)=>{ if (si === sIndex) { return { ...subject, [event.target.name]: event.target.value }; } return subject; }); return { ...sem, subjects: updatedSubjects }; } return sem; }); setSemesters(newSemesters); }; const addSubject = (index)=>{ const newSemesters = semesters.map((sem, i)=>{ if (i === index) { return { ...sem, subjects: [ ...sem.subjects, { subject: '', grade: '', credit: '' } ] }; } return sem; }); setSemesters(newSemesters); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#010101] w-full min-h-screen text-white p-4 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-5xl mb-12", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "Calci"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, semesters.map((semester, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-start mb-4 w-full max-w-3xl", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-gray-800 p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "semester", semester.semesterNo, ":", /*#__PURE__*/ React.createElement("input", { type: "number", name: "cgpa", className: "bg-transparent border-b border-white outline-none text-white ml-2 w-[60px]", defaultValue: 0, __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addSubject(index), __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-down", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("table", { className: "mt-4 w-full", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "text-left", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "pb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }, "Subject"), /*#__PURE__*/ React.createElement("th", { className: "pb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 21 }, __self: this }, "Grade"), /*#__PURE__*/ React.createElement("th", { className: "pb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }, "Credit"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, semester.subjects.map((subject, sIndex)=>/*#__PURE__*/ React.createElement("tr", { key: sIndex, __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 63, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "subject", value: subject.subject, onChange: (e)=>handleSubjectChange(e, index, sIndex), className: "bg-transparent border-b border-gray-500 focus:border-white w-full", __source: { fileName: "", lineNumber: 63, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 64, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "grade", value: subject.grade, onChange: (e)=>handleSubjectChange(e, index, sIndex), className: "bg-transparent border-b border-gray-500 focus:border-white w-full", __source: { fileName: "", lineNumber: 64, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 65, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "credit", value: subject.credit, onChange: (e)=>handleSubjectChange(e, index, sIndex), className: "bg-transparent border-b border-gray-500 focus:border-white w-full", __source: { fileName: "", lineNumber: 65, columnNumber: 27 }, __self: this }))))))))), /*#__PURE__*/ React.createElement("button", { onClick: addSemester, className: "mt-4 p-4 rounded-full bg-blue-500 flex items-center justify-center w-[50px] h-[50px]", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })))); }