function MainComponent() { const [routines, setRoutines] = React.useState([]); const [selectedRoutine, setSelectedRoutine] = React.useState({}); const [routineName, setRoutineName] = React.useState(''); const [steps, setSteps] = React.useState([ { id: 1, stepName: '', duration: '', required: false } ]); const handleAddRoutine = (e)=>{ e.preventDefault(); const newRoutine = { id: routines.length + 1, name: routineName, steps }; setRoutines([ ...routines, newRoutine ]); setRoutineName(''); setSteps([ { id: 1, stepName: '', duration: '', required: false } ]); }; const handleAddStep = ()=>{ setSteps([ ...steps, { id: steps.length + 1, stepName: '', duration: '', required: false } ]); }; const updateStep = (index, field, value)=>{ const newSteps = steps.map((step, i)=>index === i ? { ...step, [field]: value } : step); setSteps(newSteps); }; const handleStartRoutine = (routine)=>{ setSelectedRoutine(routine); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F4F8] p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center py-8", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#334155] font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Routine Tracker"), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#64748B] font-roboto mt-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Keep track of time spent on your daily routines")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#334155] font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Add New Routine"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddRoutine, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "routineName", className: "block text-sm font-medium text-[#334155] font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, "Routine Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "routineName", id: "routineName", value: routineName, onChange: (e)=>setRoutineName(e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this })), steps.map((step, index)=>/*#__PURE__*/ React.createElement("div", { key: step.id, className: "mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#334155] font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, "Step ", index + 1), /*#__PURE__*/ React.createElement("input", { type: "text", name: `stepName-${step.id}`, value: step.stepName, onChange: (e)=>updateStep(index, 'stepName', e.target.value), placeholder: "Step Name", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: `duration-${step.id}`, value: step.duration, onChange: (e)=>updateStep(index, 'duration', e.target.value), placeholder: "Duration (in minutes)", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `required-${step.id}`, checked: step.required, onChange: (e)=>updateStep(index, 'required', e.target.checked), className: "rounded border-gray-300", __source: { fileName: "", lineNumber: 52, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm text-[#334155] font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 23 }, __self: this }, "Required")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleAddStep, className: "text-[#2563EB] bg-transparent hover:bg-[#E0E7FF] font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, "+ Add Step"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-[#2563EB] hover:bg-[#1D4ED8] font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "Add Routine")))), /*#__PURE__*/ React.createElement("div", { className: "col-span-2", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#334155] font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "Today's Routines"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, routines.length > 0 ? routines.map((routine)=>/*#__PURE__*/ React.createElement("div", { key: routine.id, className: "mb-4 last:mb-0", __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#334155] font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 23 }, __self: this }, routine.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 23 }, __self: this }, routine.steps.map((step, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "text-sm text-[#64748B] font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 27 }, __self: this }, step.stepName, " - ", step.duration, " minutes ", step.required && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 76, columnNumber: 149 }, __self: this }, "(Required)")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleStartRoutine(routine), className: "mt-2 text-sm text-[#2563EB] hover:text-[#1D4ED8]", __source: { fileName: "", lineNumber: 79, columnNumber: 23 }, __self: this }, "Start Routine"))) : /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#64748B] font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, "No routines added yet 🕰️"))))))); }