function MainComponent() { const days = [ "Day 1", "Day 2", "Day 3", "Day 4" ]; const sets = [ { set: 1, records: [ "12 x 43kg", "12 x 45kg", "", "12 x 50kg", "current set" ] }, { set: 2, records: [ "10 x 41kg", "10 x 44kg", "", "10 x 48kg", "" ] }, { set: 3, records: [ "8 x 40kg", "8 x 43kg", "", "", "" ] }, { set: 4, records: [ "6 x 39kg", "", "", "", "" ] }, { set: 5, records: [ "4 x 38kg", "", "", "", "" ] } ]; const [weight, setWeight] = React.useState(''); const [reps, setReps] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); // Handle the current set submission logic }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-10", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex space-x-4 justify-center mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border border-gray-400 p-2 font-roboto", type: "number", name: "weight", placeholder: "Weight", value: weight, onChange: (e)=>setWeight(e.target.value), __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border border-gray-400 p-2 font-roboto", type: "number", name: "reps", placeholder: "Reps", value: reps, onChange: (e)=>setReps(e.target.value), __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 font-roboto", type: "submit", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Log Set")), /*#__PURE__*/ React.createElement("table", { className: "table-fixed border-collapse w-[90%] font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200 text-left", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-400 p-2", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Set Number"), days.map((day, index)=>/*#__PURE__*/ React.createElement("th", { key: index, className: "border border-gray-400 p-2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, day)), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-400 p-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Current Workout"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, sets.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("tr", { key: rowIndex, className: "even:bg-gray-100", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-400 p-2 text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, row.set), row.records.map((record, colIndex)=>{ const cellContent = record === "current set" ? "current set" : record; return /*#__PURE__*/ React.createElement("td", { key: colIndex, className: "border border-gray-400 p-2 text-center", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, cellContent); })))))); }

Set Number	Day 1	Day 2	Day 4	Current Workout
1	12 x 43kg	12 x 45kg	12 x 50kg	current set
2	10 x 41kg	10 x 44kg	10 x 48kg
3	8 x 40kg	8 x 43kg
4	6 x 39kg
5	4 x 38kg