v2.0

Author: codeaashu

src/Page/ResoucesHub/Courseslist.jsx

@@ -29,7 +29,6 @@ const courses = [
     level: 'Beginner',
     domain: ['Web Development', 'Javascript', 'JS', 'Frontend', 'Free'],
     courseLink: 'https://youtu.be/sscX432bMZo?si=5ig6-ErKPW97NU5L',
-    poster: '/assets/Courses/JSHiteshChoudhary.png',
     shareLink: '#javascript-part-1-hc',
   },
   {
@@ -40,7 +39,6 @@ const courses = [
     level: 'Beginner',
     domain: ['Web Development', 'Javascript', 'JS', 'Frontend', 'Free'],
     courseLink: 'https://youtu.be/_TjtAyMkiTI?si=XwtFRiCPTWQNgAOH',
-    poster: '/assets/Courses/JSHiteshChoudhary.png',
     shareLink: '#javascript-part-2-hc',
   },
   {
@@ -51,7 +49,6 @@ const courses = [
     level: 'Beginner',
     domain: ['Web Development', 'HTML', 'Frontend', 'Free'],
     courseLink: 'https://youtu.be/rklidcZ-aLU?si=2iv5ZV0EypTpTsw7',
-    poster: '/assets/Courses/HTML1.png',
     shareLink: '#htmlbyprashantJain',
   },
   {
@@ -62,7 +59,6 @@ const courses = [
     level: 'Beginner',
     domain: ['Web Development', 'CSS', 'Frontend', 'Free'],
     courseLink: 'https://youtu.be/OpWjt_wbV4E?si=u_Z9BbUrhim4Ne9_',
-    poster: '/assets/Courses/CSS1.png',
     shareLink: '#cssbyprashantJain',
   },
   {
@@ -73,7 +69,6 @@ const courses = [
     level: 'Beginner',
     domain: ['Web Development', 'HTML', 'Frontend', 'Free'],
     courseLink: 'https://youtu.be/k7ELO356Npo?si=YYhRTsCFGLGbFF1h',
-    poster: '/assets/Courses/HTML4.png',
     shareLink: '#htmlbylovebabbar',
   },
   {
@@ -84,7 +79,6 @@ const courses = [
     level: 'Beginner',
     domain: ['Web Development', 'CSS', 'Frontend', 'Free'],
     courseLink: 'https://youtu.be/dSJM4Gyh8jE?si=0DA97_AKrV3bfKFo',
-    poster: '/assets/Courses/CSS2.png',
     shareLink: '#cssbylovebabbar',
   },
   {
@@ -95,7 +89,6 @@ const courses = [
     level: 'Beginner',
     domain: ['Web Development', 'HTML', 'CSS', 'Frontend', 'Free'],
     courseLink: 'https://youtu.be/G3e-cpL7ofc?si=D5xPjvKi7AnfDFft',
-    poster: '/assets/Courses/HTML3.png',
     shareLink: '#htmlcssbysupersimpledev',
   },
   {
@@ -106,7 +99,16 @@ const courses = [
     level: 'Beginner',
     domain: ['Web Development', 'CSS', 'Frontend', 'Free'],
     courseLink: 'https://youtu.be/OXGznpKZ_sA?si=_2uGEik_pdGQM_Ks',
-    poster: '/assets/Courses/CSS3.png',
+    shareLink: '#htmlbydavegray',
+  },
+  {
+    platform: 'YouTube',
+    title: 'CSS - English',
+    instructor: 'Dave Gray',
+    duration: '11 Hour',
+    level: 'Beginner',
+    domain: ['Web Development', 'CSS', 'Frontend', 'Free'],
+    courseLink: 'https://youtu.be/pN6jk0uUrD8?si=89uQMPPR2rZvjfnY',
     shareLink: '#htmlbydavegray',
   },
   // Add more courses similarly...
@@ -187,6 +189,7 @@ const StyledCoursesCard = styled.div`
     }
   }
 `;
+
 const CoursesCardComponent = ({
   platform,
   title,
@@ -198,6 +201,15 @@ const CoursesCardComponent = ({
   poster,
   shareLink,
 }) => {
+  const getYouTubeThumbnail = (url) => {
+    const videoIdMatch = url.match(
+      /(?:https?:\/\/)?(?:www\.)?youtu(?:\.be\/|be\.com\/(?:watch\?v=|embed\/|v\/))([\w-]{11})/,
+    );
+    return videoIdMatch ? `https://img.youtube.com/vi/${videoIdMatch[1]}/hqdefault.jpg` : poster;
+  };
+
+  const thumbnail = platform === 'YouTube' ? getYouTubeThumbnail(courseLink) : poster;
+
   return (
     <StyledCoursesCard id={shareLink.substring(1)}>
       <div className="flex items-center justify-between p-2">
@@ -226,7 +238,7 @@ const CoursesCardComponent = ({
           </button>
         </div>
         <img
-          src={poster}
+          src={thumbnail}
           alt={`${title} Poster`}
           className="h-full w-full rounded-lg object-cover"
           onError={(e) => {