solve issue (#26)

solve issue (#26)

Author: KrimsonSquad

src/assets/react.svg

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const YouTubeEmbed = ({ videoId }) => {
-  const videoUrl = `https://www.youtube.com/embed/${videoId}`;
+const Embeder= ({ videoId }) => {
+  const videoUrl = `${videoId}`;
 
   return (
     <div
@@ -30,4 +30,4 @@ const YouTubeEmbed = ({ videoId }) => {
   );
 };
 
-export default YouTubeEmbed;
+export default Embeder;

src/components/YouTubeEmbed.jsx renamed to src/components/Embeder.jsx

@@ -4,15 +4,23 @@ const courses = {
     author: 'Dev Gautam Kumar',
     image: 'https://dummyimage.com/600x400/00BCD4/fff&text=ZSH+Setup', // Cyan
     description: 'Enhance your terminal experience with OH MY ZSH.',
-    ytb_vid: 'dCdX5v3IU60',
+    embed_link: 'https://www.youtube.com/embed/dCdX5v3IU60',
     contentFile: 'course1.md',
   },
   'course 2: getting started with cli': {
     title: 'Course 2: Getting Started with CLI',
     author: 'Dev Gautam Kumar',
     image: 'https://dummyimage.com/600x400/FF9800/fff&text=CLI+PART+1', // Orange
     description: 'Kick your journey with CLI',
-    ytb_vid: 'B4b9pX1lqU4',
+    embed_link: 'https://www.youtube.com/embed/B4b9pX1lqU4',
+    contentFile: 'course2.md',
+  },
+  'course 3: getting started with cli': {
+    title: 'Course 3: Introduction to Bourne Shell',
+    author: 'Dev Gautam Kumar',
+    image: 'https://dummyimage.com/600x400/fff&text=B0urn3+$h3ll', // Orange
+    description: 'Get started with Shell Scripts',
+    embed_link: 'https://www.canva.com/design/DAGS2jSbGgI/NHrTUX9491PY9e31licHrA/view?embed',
     contentFile: 'course2.md',
   },
 };

src/data/courseData.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import courses from '@/data/courseData';
 import { marked } from 'marked';
-import YouTubeEmbed from '@/components/YouTubeEmbed';
+import YouTubeEmbed from '@/components/Embeder';
 
 function CourseDetail() {
   const { courseName } = useParams();
@@ -23,11 +23,11 @@ function CourseDetail() {
         console.error('Error fetching the markdown file:', error)
       );
   }, [course.contentFile]);
-
+  console.table(course)
   return (
     <div className="container mt-5">
       <h1>{course.title}</h1>
-      <YouTubeEmbed videoId={course.ytb_vid}></YouTubeEmbed>
+      <YouTubeEmbed videoId={course.embed_link}></YouTubeEmbed>
       <p>{course.description}</p>
       <div dangerouslySetInnerHTML={{ __html: content }} />
     </div>