Base code

frontend/src/components/BlogWriter/PhaseNavigationTest.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import PhaseNavigation from './PhaseNavigation';
+import { Phase } from './PhaseNavigation';
+
+// Test component to verify phase navigation functionality
+export const PhaseNavigationTest: React.FC = () => {
+  const [currentPhase, setCurrentPhase] = useState<string>('research');
+  
+  const testPhases: Phase[] = [
+    {
+      id: 'research',
+      name: 'Research',
+      icon: '🔍',
+      description: 'Research your topic and gather data',
+      completed: true,
+      current: currentPhase === 'research',
+      disabled: false
+    },
+    {
+      id: 'outline',
+      name: 'Outline',
+      icon: '📝',
+      description: 'Create and refine your blog outline',
+      completed: true,
+      current: currentPhase === 'outline',
+      disabled: false
+    },
+    {
+      id: 'content',
+      name: 'Content',
+      icon: '✍️',
+      description: 'Generate and edit your blog content',
+      completed: false,
+      current: currentPhase === 'content',
+      disabled: false
+    },
+    {
+      id: 'seo',
+      name: 'SEO',
+      icon: '📈',
+      description: 'Optimize for search engines',
+      completed: false,
+      current: currentPhase === 'seo',
+      disabled: true
+    },
+    {
+      id: 'publish',
+      name: 'Publish',
+      icon: '🚀',
+      description: 'Publish your blog post',
+      completed: false,
+      current: currentPhase === 'publish',
+      disabled: true
+    }
+  ];
+
+  const handlePhaseClick = (phaseId: string) => {
+    setCurrentPhase(phaseId);
+  };
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
+      <h2>Phase Navigation Test</h2>
+      <p>Current Phase: <strong>{currentPhase}</strong></p>
+      
+      <PhaseNavigation
+        phases={testPhases}
+        currentPhase={currentPhase}
+        onPhaseClick={handlePhaseClick}
+      />
+      
+      <div style={{ marginTop: '20px', padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
+        <h3>Phase Status:</h3>
+        <ul>
+          {testPhases.map(phase => (
+            <li key={phase.id}>
+              <strong>{phase.name}</strong>: 
+              {phase.completed ? ' ✅ Completed' : ' ⏳ Pending'} | 
+              {phase.current ? ' 🎯 Current' : ''} | 
+              {phase.disabled ? ' 🚫 Disabled' : ' ✅ Enabled'}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default PhaseNavigationTest;