feat: StatementPreview component

Author: AlexVOiceover

src/components/statementWizard/StatementPreview.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Entry } from '../../../types/entries';
+
+interface StatementPreviewProps {
+  selection: Entry;
+}
+
+const StatementPreview: React.FC<StatementPreviewProps> = ({ selection }) => {
+  const { subject, verb, object, adverbial } = selection.atoms;
+  const adverbialText =
+    adverbial && adverbial.length > 0 ? adverbial.join(' ') : '';
+  const fullStatement = `${subject} ${verb} ${object}${
+    adverbialText ? ' ' + adverbialText : ''
+  }`;
+
+  return (
+    <div className='mt-4 p-2 border-t border-gray-200 bg-gray-50'>
+      <p className='text-sm text-gray-600'>
+        Current Statement: {fullStatement}
+      </p>
+    </div>
+  );
+};
+
+export default StatementPreview;

src/components/statementWizard/StatementWizard.tsx

@@ -18,6 +18,7 @@ import SentimentVerbPicker from './SentimentVerbPicker';
 import { PrivacySelector } from './PrivacySelector';
 import statementsCategories from '../../../data/statementsCategories.json';
 import StepContainer from './StepContainer';
+import StatementPreview from './StatementPreview';
 import nlp from 'compromise';
 
 interface StatementWizardProps {
@@ -394,6 +395,8 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
             {renderCurrentStep()}
           </motion.div>
         </AnimatePresence>
+        {/* Statement preview shows the statement being built */}
+        <StatementPreview selection={selection} />
       </DialogContent>
     </Dialog>
   );