06_js-debug/projects/debugging-multi-step-form-template/src/steps/GoalSetting.jsx

@@ -0,0 +1,65 @@
+import FormSelect from '../components/FormSelect';
+import FormCheckboxes from '../components/FormCheckboxes';
+
+function GoalSetting({ formData, handleChange, handleCheckboxChange, errors }) {
+  return (
+    <div>
+      <h2 className="text-xl font-semibold mb-4">Activity & Energy</h2>
+      <p className="mb-6 text-gray-700">
+        Tell us a little about your activity level and energy.
+      </p>
+
+      <div className="mb-10">
+        <FormCheckboxes
+          legend="What are your goals?"
+          options={[
+            {
+              id: 'weightLoss',
+              name: 'goals',
+              label: 'Weight Loss',
+              checked: formData.goals.includes('weightLoss'),
+            },
+            {
+              id: 'muscleGain',
+              name: 'goals',
+              label: 'Muscle Gain',
+              checked: formData.goals.includes('musleGain'),
+            },
+            {
+              id: 'improveHealth',
+              name: 'goals',
+              label: 'Improve Health',
+              checked: formData.goals.includes('improveHealt'),
+            },
+            {
+              id: 'boostEnergy',
+              name: 'goals',
+              label: 'Boost Energy',
+              checked: formData.goals.includes('boostEnergy'),
+            },
+          ]}
+          onChange={(id, isChecked) => handleCheckboxChange('goals', id)}
+          required={true}
+          error={errors.goals}
+        />
+      </div>
+
+      <div className="mb-4">
+        <FormSelect
+          id="timeCommitment"
+          name="timeCommitment"
+          options={[
+            { value: '15', label: '15 minutes' },
+            { value: '30', label: '30 minutes' },
+            { value: '60', label: '1 hour' },
+          ]}
+          onChange={handleChange}
+          label="How much time can you commit each day?"
+          required={true}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default GoalSetting;