tsk-10: Edit Contact (#23)

Closes #10 Reviewed-on: phoenix/textsender#23 Co-authored-by: phoenix <kundeng00@pm.me> Co-committed-by: phoenix <kundeng00@pm.me>
2026-01-29 22:20:28 +00:00
parent 34644d1cd2
commit 0202425a09
15 changed files with 1952 additions and 787 deletions
@@ -0,0 +1,93 @@
+import React from 'react';
+import styles from './StepNavigation.module.css';
+
+function StepNavigation({
+  currentStep,
+  onNext,
+  onBack,
+  onSubmit,
+  onDone,
+  canProceed,
+  canGoBack,
+  isSubmitting,
+  submissionError,
+}) {
+  const renderButtons = () => {
+    switch (currentStep) {
+      case 'select':
+      case 'modify':
+        return (
+          <div className={styles.buttonGroup}>
+            <button
+              onClick={onBack}
+              disabled={!canGoBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              <span className={styles.buttonIcon}>←</span>
+              Back
+            </button>
+            <button
+              onClick={onNext}
+              disabled={!canProceed}
+              className={`${styles.navButton} ${styles.nextButton}`}
+            >
+              {currentStep === 'select' ? 'Next' : 'Review'}
+              <span className={styles.buttonIcon}>→</span>
+            </button>
+          </div>
+        );
+      case 'confirm':
+        return (
+          <div className={styles.buttonGroup}>
+            <button
+              onClick={onBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              <span className={styles.buttonIcon}>←</span>
+              Back
+            </button>
+            <button
+              onClick={onSubmit}
+              disabled={isSubmitting}
+              className={`${styles.navButton} ${styles.submitButton}`}
+            >
+              {isSubmitting ? (
+                <>
+                  <span className={styles.buttonIcon}>⏳</span>
+                  Updating...
+                </>
+              ) : (
+                <>
+                  <span className={styles.buttonIcon}>✓</span>
+                  Update Contact
+                </>
+              )}
+            </button>
+          </div>
+        );
+      case 'result':
+        return (
+          <button
+            onClick={onDone}
+            className={`${styles.navButton} ${styles.doneButton}`}
+          >
+            <span className={styles.buttonIcon}>🏁</span>
+            Done
+          </button>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={styles.navigation}>
+      {renderButtons()}
+      {submissionError && (
+        <span className={styles.error}>{submissionError}</span>
+      )}
+    </div>
+  );
+}
+
+export default StepNavigation;