folder restructuring for pages

src/pages/Settings/Settings.jsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { useSettings } from './hooks/useSettings';
+import SettingsTabs from './components/SettingsTabs';
+import SaveButton from '../../components/SaveButton';
+import Notification from '../../components/Notification';
+import SiteInformationSettings from './components/SiteInformationSettings';
+import ContentReadingSettings from './components/ContentReadingSettings';
+import WritingPublishingSettings from './components/WritingPublishingSettings';
+import MediaAssetsSettings from './components/MediaAssetsSettings';
+import UsersMembershipSettings from './components/UsersMembershipSettings';
+import HelixSettings from './components/HelixSettings';
+import './settings.css';
+
+/**
+ * Main Settings Page Component
+ */
+export default function Settings() {
+	const {
+		settings,
+		loading,
+		saving,
+		error,
+		hasUnsavedChanges,
+		updateSetting,
+		saveSettings,
+		resetSettings,
+	} = useSettings();
+
+	const [ activeTab, setActiveTab ] = useState( 'site' );
+	const [ notification, setNotification ] = useState( null );
+
+	const handleSave = async () => {
+		const result = await saveSettings();
+
+		if ( result.success ) {
+			setNotification( {
+				type: 'success',
+				message: result.message || 'Settings saved successfully!',
+			} );
+		} else {
+			setNotification( {
+				type: 'error',
+				message:
+					result.message ||
+					'Failed to save settings. Please try again.',
+			} );
+		}
+	};
+
+	const handleReset = () => {
+		resetSettings();
+		setNotification( {
+			type: 'info',
+			message: 'Changes have been reset to their original values.',
+		} );
+	};
+
+	const handleTabChange = ( tabId ) => {
+		if ( hasUnsavedChanges ) {
+			const confirmed = window.confirm(
+				'You have unsaved changes. Are you sure you want to switch tabs? Your changes will be lost.'
+			);
+			if ( ! confirmed ) {
+				return;
+			}
+		}
+		setActiveTab( tabId );
+	};
+
+	const renderTabContent = () => {
+		const commonProps = { settings, updateSetting };
+
+		switch ( activeTab ) {
+			case 'site':
+				return <SiteInformationSettings { ...commonProps } />;
+			case 'content':
+				return <ContentReadingSettings { ...commonProps } />;
+			case 'writing':
+				return <WritingPublishingSettings { ...commonProps } />;
+			case 'media':
+				return <MediaAssetsSettings { ...commonProps } />;
+			case 'users':
+				return <UsersMembershipSettings { ...commonProps } />;
+			case 'helix':
+				return <HelixSettings { ...commonProps } />;
+			default:
+				return <SiteInformationSettings { ...commonProps } />;
+		}
+	};
+
+	if ( loading ) {
+		return (
+			<div className="helix-settings-page">
+				<div className="helix-loading">
+					<div className="helix-spinner"></div>
+					<p>Loading settings...</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="helix-settings-page">
+			{ /* Header */ }
+			<div className="helix-settings-header">
+				<h1>Settings</h1>
+				<p>Manage your WordPress site configuration</p>
+			</div>
+
+			{ /* Global Error */ }
+			{ error && (
+				<Notification
+					type="error"
+					message={ error }
+					onClose={ () => {} }
+					autoClose={ false }
+				/>
+			) }
+
+			{ /* Success/Info Notifications */ }
+			{ notification && (
+				<Notification
+					type={ notification.type }
+					message={ notification.message }
+					onClose={ () => setNotification( null ) }
+				/>
+			) }
+
+			{ /* Tabs Navigation */ }
+			<SettingsTabs
+				activeTab={ activeTab }
+				onTabChange={ handleTabChange }
+				hasUnsavedChanges={ hasUnsavedChanges }
+			/>
+
+			{ /* Tab Content */ }
+			<div className="helix-settings-content">
+				<div
+					id={ `${ activeTab }-panel` }
+					role="tabpanel"
+					aria-labelledby={ `${ activeTab }-tab` }
+					className="helix-tab-panel"
+				>
+					{ renderTabContent() }
+				</div>
+			</div>
+
+			{ /* Footer Controls */ }
+			<div className="helix-settings-footer">
+				<SaveButton
+					onSave={ handleSave }
+					onReset={ handleReset }
+					saving={ saving }
+					hasUnsavedChanges={ hasUnsavedChanges }
+				/>
+			</div>
+		</div>
+	);
+}