function MainComponent() { const [showPlateCalculations, setShowPlateCalculations] = React.useState(false); const [availablePlates, setAvailablePlates] = React.useState({ plate20kg: 0, plate15kg: 0, plate10kg: 0, plate5kg: 0, plate45lbs: 0, plate35lbs: 0, plate25lbs: 0, plate10lbs: 0 }); const [unit, setUnit] = React.useState('lbs'); const [plateArrangement, setPlateArrangement] = React.useState([]); const percentageWeights = [ { percent: '100%', weight: '1RM', reps: '1' }, { percent: '90%', weight: '90%1RM', reps: '3' }, { percent: '80%', weight: '80%1RM', reps: '5' }, { percent: '70%', weight: '70%1RM', reps: '7' }, { percent: '60%', weight: '60%1RM', reps: '9' }, { percent: '50%', weight: '50%1RM', reps: '11' } ]; const handlePlateChange = (event)=>{ setAvailablePlates((prev)=>({ ...prev, [event.target.name]: event.target.value })); }; React.useEffect(()=>{ setShowPlateCalculations(true); }, []); return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "pt-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl text-center", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Bar Loading Guide"), /*#__PURE__*/ React.createElement("p", { className: "text-base text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Select available plates"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2 bg-red-600 p-2 col-span-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, unit === 'kg' ? '20kg' : '45lbs'), /*#__PURE__*/ React.createElement("input", { type: "number", name: unit === 'kg' ? "plate20kg" : "plate45lbs", className: "p-1", value: unit === 'kg' ? availablePlates.plate20kg : availablePlates.plate45lbs, onChange: handlePlateChange, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2 bg-blue-500 p-2 col-span-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, unit === 'kg' ? '15kg' : '35lbs'), /*#__PURE__*/ React.createElement("input", { type: "number", name: unit === 'kg' ? "plate15kg" : "plate35lbs", className: "p-1", value: unit === 'kg' ? availablePlates.plate15kg : availablePlates.plate35lbs, onChange: handlePlateChange, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2 bg-green-500 p-2 col-span-2", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, unit === 'kg' ? '10kg' : '25lbs'), /*#__PURE__*/ React.createElement("input", { type: "number", name: unit === 'kg' ? "plate10kg" : "plate25lbs", className: "p-1", value: unit === 'kg' ? availablePlates.plate10kg : availablePlates.plate25lbs, onChange: handlePlateChange, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2 bg-yellow-400 p-2 col-span-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, unit === 'kg' ? '5kg' : '10lbs'), /*#__PURE__*/ React.createElement("input", { type: "number", name: unit === 'kg' ? "plate5kg" : "plate10lbs", className: "p-1", value: unit === 'kg' ? availablePlates.plate5kg : availablePlates.plate10lbs, onChange: handlePlateChange, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }))))); }