Added feature to watch videos

docusaurus.config.ts

@@ -98,6 +98,7 @@ const config: Config = {
           position: 'left'
         },
         {to: '/news', label: 'Tech News', position: 'left'},
+        {to: '/lectures', label: 'Video Lectures', position: 'left'},
         {
           href: 'https://github.com/souvikpramanikgit/LearnHub',
           label: 'GitHub',

lectures/Videolectures.js

@@ -0,0 +1,40 @@
+const Videos = [
+  {
+    title: "Lecture 1: Introduction",
+    src: "/videos/lec1.mp4",
+    description: "A basic overview of the topic.",
+    category:"web development",
+  },
+  {
+    title: "Lecture 2: Deep Dive",
+    src: "/videos/lec2.mp4",
+    description: "Detailed explanation with examples.",
+    category:"generative-ai",
+  },
+  {
+    title: "Lecture 3: Deep Dive",
+    src: "/videos/lec3.mp4",
+    description: "Detailed explanation with examples.",
+    category:"data-structure",
+
+  },
+  {
+    title: "Lecture 4: Deep Dive",
+    src: "/videos/lec4.mp4",
+    description: "Detailed explanation with examples.",
+    category:"blockchain",
+  },{
+    title: "Lecture 5: Deep Dive",
+    src: "/videos/lec5.mp4",
+    description: "Detailed explanation with examples.",
+    category:"devops",
+  },
+  {
+    title: "Lecture 6: Deep Dive",
+    src: "/videos/lec6.mp4",
+    description: "Detailed explanation with examples.",
+    category:"ai",
+  }
+];
+
+export default Videos;

src/pages/index.module.css

@@ -328,4 +328,27 @@
 .courseButton:hover {
   background: linear-gradient(90deg, #16a34a 0%, #2563eb 100%);
   color: #fff;
-}
+}
+
+/* /src/css/custom.css */
+.filterlect {
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+
+.filterlect option {
+  background-color: var(--ifm-background-surface-color);
+  color: var(--ifm-font-color-base);
+  cursor: pointer;
+}
+
+.videoGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+

src/pages/lectures.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from "react";
+import Layout from "@theme/Layout";
+import Videos from "../../lectures/Videolectures"; // make sure path and case match exactly
+import styles from './index.module.css';
+
+export default function LecturesPage() {
+  const [selectedCategory, setSelectedCategory] = useState("all");
+  useEffect(() => {
+    const savedCategory = localStorage.getItem("selectedCategory");
+    if (savedCategory) {
+      setSelectedCategory(savedCategory);
+    }
+  }, []);
+
+  // Save category to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem("selectedCategory", selectedCategory);
+  }, [selectedCategory]);
+
+  const filteredVideos =
+    selectedCategory === "all"
+      ? Videos
+      : Videos.filter(
+          (video) =>
+            video.category.toLowerCase() === selectedCategory.toLowerCase()
+        );
+
+  return (
+    <Layout
+      title="Video Lectures"
+      description="Watch our latest educational videos"
+    >
+      <main className="container margin-vert--lg">
+        <h2 className="text-2xl font-bold">Video Lectures</h2>
+        <div className="margin-bottom--md">
+          <select
+            className={styles.filterlect}
+            value={selectedCategory}
+            onChange={(e) => setSelectedCategory(e.target.value)}
+          >
+            <option value="all">All Categories</option>
+            <option value="generative-ai">Generative AI</option>
+            <option value="data-structure">Data Structure</option>
+            <option value="blockchain">Blockchain</option>
+            <option value="devops">DevOps</option>
+            <option value="ai">AI</option>
+          </select>
+        </div>
+
+        {filteredVideos.length === 0 ? (
+          <p>No videos available in this category.</p>
+        ) : (
+          <div className={styles.videoGrid}>
+            {filteredVideos.map((video, idx) => (
+            <div key={idx} className="border p-4 rounded mb-4">
+              <h3 className="font-semibold">{video.title}</h3>
+              <p className="text-sm text-gray-600">{video.description}</p>
+              <p className="text-xs text-gray-500">
+                Category: {video.category}
+              </p>
+              <video controls width="100%">
+                <source src={video.src} type="video/mp4" />
+              </video>
+            </div>
+          ))}
+          </div>
+
+        )}
+      </main>
+    </Layout>
+  );
+}