90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
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;
|