add new cms

Author: devsdenepal

src/App.css

@@ -1,16 +1,5 @@
-.App {
-  /* text-align: center; */
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+:root {
+  --primary-color: rgb(186 22 163);
 }
 
 .App-header {
@@ -24,7 +13,7 @@
   color: white;
 }
 .lnk {
-    color: rgb(186 22 163) ;
+    color: var(--primary-color);
     text-decoration: none ;
 }
 .clk{
@@ -53,3 +42,12 @@ background: rgb(186 22 163) !important;
 .search-expanded .form-control {
   width: 300px; /* You can adjust this width */
 }
+input, textarea{ 
+  border: 1px solid var(--primary-color) !important;
+}
+.input-group span{
+border: 1px solid var(--primary-color) !important;
+}
+.btn-primary{
+  background-color: var(--primary-color) !important;
+}

src/App.jsx

@@ -21,7 +21,7 @@ import Navbar from './components/Navbar';
 import CourseDetail from './components/CourseDetail';
 import Dashboard from './components/dashboard';
 import courses from './components/courseData';
-
+import  UploadCourse from './components/uploadCourse';
 function App() {
   const [user, setUser] = useState(null);
 
@@ -68,7 +68,7 @@ function App() {
               <Route path="/courses/:courseName" element={<CourseDetail />} />
               <Route path="/" element={<Dashboard courses={courses} />} />
               <Route path="/search" element={<SearchResults />} />
-
+              <Route path="/admin" element={<UploadCourse/>} />
             </Routes>
             <ToastContainer />
           </div>

src/components/CourseDetail.jsx

@@ -1,21 +1,45 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import courses from './courseData'; // Ensure the path is correct
+import courseData from './courseData'; // Ensure correct path
 import YouTubeEmbed from './YouTubeEmbed';
-import { marked } from 'marked';  // Import the marked library
 
 function CourseDetail() {
   const { courseName } = useParams();
   const courseKey = courseName.toLowerCase(); // Ensure proper formatting
-  const course = courses[courseKey]; // Lookup using the sanitized course key
+  const [course, setCourse] = useState(null); // Store course data
+  const [loading, setLoading] = useState(true); // Loading state
+
+  useEffect(() => {
+    const loadCourseData = async () => {
+      try {
+        const courses = await courseData(); // Fetch courses from Firestore
+        setCourse(courses[courseKey]); // Set the specific course
+      } catch (error) {
+        console.error("Error fetching course:", error);
+      }
+      setLoading(false); // Stop loading once data is fetched
+    };
+
+    loadCourseData();
+  }, [courseKey]);
+
+  if (loading) {
+    return <h2 className="text-center">Loading...</h2>;
+  }
 
   if (!course) {
+    console.log(course);
     return <h2 className="text-center">Course not found</h2>;
   }
 
-  // Function to convert markdown to HTML using 'marked'
-  const renderMarkdown = (markdownText) => {
-    return { __html: marked(markdownText) };
+  // Function to convert newlines to <br />
+  const formatContent = (content) => {
+    return content ? content.split('\n').map((line, index) => (
+      <span key={index}>
+        {line}
+        <br />
+      </span>
+    )) : '';
   };
 
   return (
@@ -25,10 +49,7 @@ function CourseDetail() {
       <p>{course.description}</p>
       <h4>Course Content:</h4>
       <YouTubeEmbed videoId={course.ytb_vid} />
-      
-      {/* Use dangerouslySetInnerHTML to inject the HTML from the markdown */}
-      <div dangerouslySetInnerHTML={renderMarkdown(course.content)} />
-
+      <p>{formatContent(course.content)}</p>
       <h6><span className="badge bg-primary"><i className="fa-solid fa-pen-nib"></i> {course.author}</span></h6>
     </div>
   );