GSSOC_ACADEMY (#418)

components/Layout.js

@@ -25,7 +25,7 @@ const Layout = ({ children }) => {
     return (
       <div className="transition-colors dark:bg-darkmode_gray-0 dark:transition-colors">
         <Navbar />
-        {showPopup && router.pathname!="/registration" && <PopupBanner onClose={handleClosePopup} />} {children}
+        {showPopup && router.pathname!="/registration" && router.pathname!=="/gssoc_academy" && <PopupBanner onClose={handleClosePopup} />} {children}
         <div className="hidden lg:block">
           <ScrollToTop />
         </div>

components/ModuleDetails.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+
+export default function ModuleDetails({ module, onSelectVideo }) {
+    if (!module) {
+      return <div>No module selected</div>
+    }
+
+    return (
+      <div>
+        <h2 className="text-3xl font-bold mb-4">{module.title}</h2>
+        <p className="text-gray-400 mb-6">{module.description}</p>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {module.videos && module.videos.map((video) => (
+            <motion.div
+              key={video.id}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="bg-gray-800 p-4 rounded-lg cursor-pointer"
+              onClick={() => onSelectVideo(video)}
+            >
+              <h3 className="text-xl font-semibold mb-2">{video.title}</h3>
+              <p className="text-gray-400">{video.description}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    )
+  }

components/ModuleList.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { motion } from "framer-motion";
+// import { Progress } from "../components/ui/progress"
+// import Progress from "@radix-ui/react-progress";
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+export default function ModuleList({ modules = [], onSelectModule }) {
+    if (!modules || modules.length === 0) {
+        return <div>No modules available</div>;
+    }
+
+    return (
+        <div className="space-y-4">
+            {modules.map((module) => (
+                <motion.div
+                    key={module.id}
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    className="bg-gray-800 p-4 rounded-lg cursor-pointer"
+                    onClick={() => onSelectModule(module)}
+                >
+                    <h3 className="text-xl font-semibold mb-2">
+                        {module.title}
+                    </h3>
+                    <p className="text-gray-400 mb-4">{module.description}</p>
+                    {/* <Progress value={module.progress} className="w-full h-2" /> */}
+                    <ProgressPrimitive.Root className="relative overflow-hidden bg-gray-200 rounded-full w-full h-3">
+                        <ProgressPrimitive.Indicator
+                        className="bg-blue-500 h-full"
+                        style={{ width: `${module.progress}%` }}
+                        />
+                    </ProgressPrimitive.Root>
+                    <p className="text-right text-sm text-gray-400 mt-2">
+                        {module.progress}% complete
+                    </p>
+                </motion.div>
+            ))}
+        </div>
+    );
+}

components/VideoPlayer.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import YouTube from 'react-youtube'
+import {Button} from "@chakra-ui/react"
+import { ArrowLeft } from 'lucide-react'
+
+export default function VideoPlayer({ video, onBack }) {
+    if (!video) {
+      return <div>No video selected</div>
+    }
+
+    const opts = {
+      height: '390',
+      width: '640',
+      playerVars: {
+        autoplay: 1,
+      },
+    }
+
+    return (
+      <div>
+        <Button onClick={onBack} variant="ghost" className="mb-4">
+          <ArrowLeft className="mr-2 h-4 w-4" /> Back to Module
+        </Button>
+        <h2 className="text-3xl font-bold mb-4">{video.title}</h2>
+        <p className="text-gray-400 mb-6">{video.description}</p>
+        <div className="aspect-w-16 aspect-h-9">
+          <YouTube videoId={video.youtubeId} opts={opts} />
+        </div>
+      </div>
+    )
+  }

package.json

@@ -58,6 +58,7 @@
     "react-select": "^5.8.0",
     "react-tooltip": "^5.27.1",
     "react-visibility-sensor": "^5.1.1",
+    "react-youtube": "^10.1.0",
     "resend": "^3.4.0",
     "styled-components": "^5.3.11"
   },
@@ -67,5 +68,6 @@
     "eslint-config-next": "12.1.6",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.6"
-  }
+  },
+  "proxy": "https://www.youtube.com"
 }

pages/api/gssocAcademyData.js

@@ -0,0 +1,93 @@
+// Dummy data
+// for URL use embed link from youtube
+
+export const modules = [
+      {
+        id: 1,
+        moduleName: "Getting Started",
+        videos: [
+          {
+            id: 1,
+            title: "Introduction to Git",
+            url: "https://youtu.be/bFHwtm6FQ4c?si=9bhuFHWY4MO8nKvu",
+            progress: 10,
+            description: "This video will introduce you to Git and its importance in the software development process."
+          },
+          {
+            id: 2,
+            title: "Installing Git",
+            url: "https://www.youtube.com/embed/GrTV59Y84S8?si=i4MfR9hUQxDFk_A6",
+            progress: 75,
+            description: "This video will introduce you to Git and its importance in the software development process."
+          }
+        ],
+        progress: 15,
+        progressMessage: "You have completed 15% of the course."
+      },
+      {
+        id: 2,
+        moduleName: "Understanding GitHub",
+        videos: [
+          {
+            id: 3,
+            title: "Introduction to GitHub",
+            url: "https://www.youtube.com/embed/bFHwtm6FQ4c?si=Tttq75dHdrwduTkF",
+            progress: 0,
+            description: "This video will introduce you to Git and its importance in the software development process."
+          },
+          {
+            id: 4,
+            title: "GitHub Features",
+            url: "https://www.youtube.com/embed/GrTV59Y84S8?si=i4MfR9hUQxDFk_A6",
+            progress: 0,
+            description: "This video will introduce you to Git and its importance in the software development process."
+          }
+        ],
+        progress: 10,
+        progressMessage: "You have completed 10% of the course."
+      },
+      {
+        id: 3,
+        moduleName: "Understanding GitHub Basic",
+        videos: [
+          {
+            id: 5,
+            title: "Introduction to GitHub",
+            url: "https://www.youtube.com/embed/bFHwtm6FQ4c?si=Tttq75dHdrwduTkF",
+            progress: 0,
+            description: "This video will introduce you to Git and its importance in the software development process."
+          },
+          {
+            id: 6,
+            title: "GitHub Features",
+            url: "https://www.youtube.com/embed/GrTV59Y84S8?si=i4MfR9hUQxDFk_A6",
+            progress: 0,
+            description: "This video will introduce you to Git and its importance in the software development process."
+          }
+        ],
+        progress: 5,
+        progressMessage: "You have completed 5% of the course."
+      },
+      {
+        id: 4,
+        moduleName: "Understanding Git",
+        videos: [
+          {
+            id: 7,
+            title: "Introduction to GitHub",
+            url: "https://www.youtube.com/embed/bFHwtm6FQ4c?si=Tttq75dHdrwduTkF",
+            progress: 0,
+            description: "This video will introduce you to Git and its importance in the software development process."
+          },
+          {
+            id: 8,
+            title: "GitHub Features",
+            url: "https://www.youtube.com/embed/GrTV59Y84S8?si=i4MfR9hUQxDFk_A6",
+            progress: 0,
+            description: "This video will introduce you to Git and its importance in the software development process."
+          }
+        ],
+        progress: 0,
+        progressMessage: "You have completed 0% of the course."
+      }
+    ];