+ );
+};
diff --git a/assets/js/sync/components/icons/pause.js b/assets/js/sync/components/icons/pause.js
new file mode 100644
index 0000000000..64c45c5334
--- /dev/null
+++ b/assets/js/sync/components/icons/pause.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+ return (
+
+ );
+};
diff --git a/assets/js/sync/components/icons/play.js b/assets/js/sync/components/icons/play.js
new file mode 100644
index 0000000000..9052734fd3
--- /dev/null
+++ b/assets/js/sync/components/icons/play.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+ return (
+
+ );
+};
diff --git a/assets/js/sync/components/icons/stop.js b/assets/js/sync/components/icons/stop.js
new file mode 100644
index 0000000000..027bd0998b
--- /dev/null
+++ b/assets/js/sync/components/icons/stop.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+ return (
+
+ );
+};
diff --git a/assets/js/sync/components/icons/sync.js b/assets/js/sync/components/icons/sync.js
new file mode 100644
index 0000000000..c8e23d3b8a
--- /dev/null
+++ b/assets/js/sync/components/icons/sync.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+ return (
+
+ );
+};
diff --git a/assets/js/sync/components/icons/thumbs-down.js b/assets/js/sync/components/icons/thumbs-down.js
new file mode 100644
index 0000000000..7677253ea0
--- /dev/null
+++ b/assets/js/sync/components/icons/thumbs-down.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+ return (
+
+ );
+};
diff --git a/assets/js/sync/components/icons/thumbs-up.js b/assets/js/sync/components/icons/thumbs-up.js
new file mode 100644
index 0000000000..3e76177d50
--- /dev/null
+++ b/assets/js/sync/components/icons/thumbs-up.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+ return (
+
+ );
+};
diff --git a/assets/js/sync/components/sync-page.js b/assets/js/sync/components/sync-page.js
new file mode 100644
index 0000000000..2d19077dbd
--- /dev/null
+++ b/assets/js/sync/components/sync-page.js
@@ -0,0 +1,182 @@
+/**
+ * WordPress dependencies.
+ */
+import { Button, Icon, Panel, PanelBody } from '@wordpress/components';
+import { WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { warning } from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import SyncControls from './sync/controls';
+import SyncLog from './sync/log';
+import SyncProgress from './sync/progress';
+import SyncStatus from './sync/status';
+
+/**
+ * Sync page component.
+ *
+ * @param {object} props Component props.
+ * @param {boolean} props.isCli If sync is a CLI sync.
+ * @param {boolean} props.isComplete If sync is complete.
+ * @param {boolean} props.isDeleting If sync is a delete and sync.
+ * @param {boolean} props.isPaused If sync is paused.
+ * @param {boolean} props.isSyncing If sync is running.
+ * @param {number} props.itemsProcessed Number of items processed.
+ * @param {number} props.itemsTotal Number of items to process.
+ * @param {string} props.lastSyncDateTime Date and time of last sync in ISO-8601.
+ * @param {boolean} props.lastSyncFailed If the last sync had failures.
+ * @param {object[]} props.log Sync message log.
+ * @param {Function} props.onDelete Callback for clicking delete and sync.
+ * @param {Function} props.onPause Callback for clicking pause.
+ * @param {Function} props.onResume Callback for clicking resume.
+ * @param {Function} props.onStop Callback for clicking stop.
+ * @param {Function} props.onSync Callback for clicking sync.
+ * @param {string} props.syncStartDateTime Date and time of current sync in ISO 8601.
+ * @returns {WPElement} Sync page component.
+ */
+export default ({
+ isCli,
+ isComplete,
+ isDeleting,
+ isPaused,
+ isSyncing,
+ itemsProcessed,
+ itemsTotal,
+ lastSyncDateTime,
+ lastSyncFailed,
+ log,
+ onDelete,
+ onPause,
+ onResume,
+ onStop,
+ onSync,
+ syncStartDateTime,
+}) => {
+ return (
+ <>
+
{__('Sync Settings', 'elasticpress')}
+
+
+
+
+
+ {__(
+ 'If you are missing data in your search results or have recently added custom content types to your site, you should run a sync to reflect these changes.',
+ 'elasticpress',
+ )}
+
+
+ {__(
+ 'All indexed data on ElasticPress will be deleted without affecting anything on your WordPress website. This may take a few hours depending on the amount of content that needs to be synced and indexed. While this is happenening, searches will use the default WordPress results',
+ 'elasticpress',
+ )}
+
+
+
+
+
+ );
+};
diff --git a/assets/js/sync/components/sync/controls.js b/assets/js/sync/components/sync/controls.js
new file mode 100644
index 0000000000..d32817447e
--- /dev/null
+++ b/assets/js/sync/components/sync/controls.js
@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies.
+ */
+import { Button } from '@wordpress/components';
+import { WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { update } from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import pause from '../icons/pause';
+import play from '../icons/play';
+import stop from '../icons/stop';
+
+/**
+ * Sync button component.
+ *
+ * @param {object} props Component props.
+ * @param {boolean} props.disabled If controls are disabled.
+ * @param {boolean} props.isPaused If syncing is paused.
+ * @param {boolean} props.isSyncing If syncing is in progress.
+ * @param {Function} props.onPause Pause button click callback.
+ * @param {Function} props.onResume Play button click callback.
+ * @param {Function} props.onStop Stop button click callback.
+ * @param {Function} props.onSync Sync button click callback.
+ * @param {boolean} props.showSync If sync button is shown.
+ * @returns {WPElement} Component.
+ */
+export default ({ disabled, isPaused, isSyncing, onPause, onResume, onStop, onSync, showSync }) => {
+ /**
+ * Render.
+ */
+ return (
+
 ) ); ?>)
-
-
-
-
-
-  ) ); ?>)
-  ) ); ?>)
-