\n {/* Add Course Section */}\n

Add New Course

\n \n {/* Left Column: Inputs */}\n

\n Title\n setNewCourse({...newCourse, title: e.target.value})}\n required\n />\n

\n Instructor\n setNewCourse({...newCourse, instructor: e.target.value})}\n />\n

\n\n

\n Course Link\n

\n setNewCourse({...newCourse, link: e.target.value})}\n />\n \n

\n\n

\n Status\n setNewCourse({...newCourse, status: e.target.value as any})}\n >\n \n \n \n \n

\n\n

\n Description\n setNewCourse({...newCourse, description: e.target.value})}\n rows={3}\n />\n

\n\n {/* Right Column: Notes & Preview */}\n

\n Image Preview\n

\n {newCourse.imageUrl ? (\n $\"Preview\"$ \n ) : (\n

\n 🖼️\n Enter a URL to fetch image\n

\n )}\n

\n \n

\n Private Notes\n setNewCourse({...newCourse, notes: e.target.value})}\n />\n

\n\n \n

\n \n

\n\n {/* Course Grid */}\n

\n {courses.map(course => (\n

\n \n \n {/* Card Image */}\n

\n {course.imageUrl ? (\n {course.title}

\n ) : (\n

\n 📚\n

\n )}\n

\n \n {course.status}\n \n

\n\n {/* Card Content */}\n

{course.title}

\n {course.instructor && (\n

{course.instructor}

\n )}\n \n {course.description && (\n

{course.description}

\n )}\n\n {course.notes && (\n

\n 📝 Notes:\n {course.notes}\n

\n )}\n

\n\n {/* Card Footer */}\n

\n {course.link ? (\n \n View Course →\n \n ) : (\n No link\n )}\n\n

\n handleStatusChange(course, e.target.value as any)}\n onClick={(e) => e.stopPropagation()}\n >\n \n \n \n \n { e.stopPropagation(); handleDelete(course.id!); }}\n className=\"text-gray-400 hover:text-red-600 p-1.5 rounded-full hover:bg-red-50 transition-colors\"\n title=\"Delete Course\"\n >\n \n \n

\n ))}\n \n {courses.length === 0 && !loading && (\n

\n 📭\n

No courses added yet

Add your first course above to get started!

\n )}\n