diff --git a/src/components/cms/ContentEditor.tsx b/src/components/cms/ContentEditor.tsx index 10e0975e..a2c1bcd5 100644 --- a/src/components/cms/ContentEditor.tsx +++ b/src/components/cms/ContentEditor.tsx @@ -1,6 +1,6 @@ 'use client'; -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { RichContentEditor } from '../editor/RichContentEditor'; import { useCMS } from '@/hooks/useCMS'; @@ -15,40 +15,87 @@ interface ContentEditorProps { */ export const ContentEditor: React.FC = ({ moduleId, lessonId }) => { const { course, updateLessonContent } = useCMS(); + const [lastSaved, setLastSaved] = useState(null); + const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle'); // Find the lesson in the course structure const currentModule = course.modules.find((m) => m.id === moduleId); const lesson = currentModule?.lessons.find((l) => l.id === lessonId); const handleUpdate = (content: string) => { + setSaveStatus('saving'); updateLessonContent(moduleId, lessonId, content); + + // Simulate save completion + setTimeout(() => { + setLastSaved(new Date()); + setSaveStatus('saved'); + + // Reset to idle after 2 seconds + setTimeout(() => { + setSaveStatus('idle'); + }, 2000); + }, 500); }; if (!lesson) { return ( -
+
Select a lesson to start editing.
); } + const getStatusText = () => { + switch (saveStatus) { + case 'saving': + return 'Saving...'; + case 'saved': + return 'Saved'; + case 'error': + return 'Save failed'; + default: + return lastSaved ? `Last saved: ${lastSaved.toLocaleTimeString()}` : 'Ready'; + } + }; + + const getStatusColor = () => { + switch (saveStatus) { + case 'saving': + return 'bg-yellow-500'; + case 'saved': + return 'bg-green-500'; + case 'error': + return 'bg-red-500'; + default: + return 'bg-gray-400'; + } + }; + return (
-
+

Editing: {lesson.title}

- - Last saved: {new Date().toLocaleTimeString()} + + {getStatusText()} -
+ -
+
-
+
-
+
); }; diff --git a/src/components/editor/CollaborativeEditingTools.tsx b/src/components/editor/CollaborativeEditingTools.tsx index 123c7f72..dfe9d22b 100644 --- a/src/components/editor/CollaborativeEditingTools.tsx +++ b/src/components/editor/CollaborativeEditingTools.tsx @@ -8,23 +8,31 @@ const COLLABORATORS = [ ]; export const CollaborativeEditingTools: React.FC = () => { + const collaboratorNames = COLLABORATORS.map(c => c.name).join(', '); + return ( -
-
- {COLLABORATORS.map((user) => ( +
+
+ {COLLABORATORS.map((user, index) => ( // eslint-disable-next-line @next/next/no-img-element {`${user.name} ))}
{COLLABORATORS.length} active diff --git a/src/components/editor/ContentTemplateLibrary.tsx b/src/components/editor/ContentTemplateLibrary.tsx index 33180bbb..5219c4c5 100644 --- a/src/components/editor/ContentTemplateLibrary.tsx +++ b/src/components/editor/ContentTemplateLibrary.tsx @@ -15,47 +15,56 @@ export const ContentTemplateLibrary: React.FC = ({ const getIcon = (id: string) => { switch (id) { case 'lesson-header': - return ; + return