folder restructuring for pages

src/components/SaveButton.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+/**
+ * Save button component with loading and status indicators
+ * @param root0
+ * @param root0.onSave
+ * @param root0.onReset
+ * @param root0.saving
+ * @param root0.hasUnsavedChanges
+ * @param root0.disabled
+ */
+const SaveButton = ( {
+	onSave,
+	onReset,
+	saving = false,
+	hasUnsavedChanges = false,
+	disabled = false,
+} ) => {
+	return (
+		<div className="helix-save-buttons">
+			<button
+				type="button"
+				onClick={ onSave }
+				disabled={ disabled || saving || ! hasUnsavedChanges }
+				className={ `helix-btn helix-btn-primary ${
+					saving ? 'saving' : ''
+				}` }
+			>
+				{ saving ? (
+					<>
+						<span className="helix-spinner"></span>
+						Saving...
+					</>
+				) : (
+					'Save Changes'
+				) }
+			</button>
+
+			{ hasUnsavedChanges && ! saving && (
+				<button
+					type="button"
+					onClick={ onReset }
+					className="helix-btn helix-btn-secondary"
+				>
+					Reset Changes
+				</button>
+			) }
+
+			{ ! hasUnsavedChanges && ! saving && (
+				<span className="helix-save-status">✓ All changes saved</span>
+			) }
+		</div>
+	);
+};
+
+export default SaveButton;