From a10dca89010c9ff655af6959dd424670749024b6 Mon Sep 17 00:00:00 2001
From: nuelo <akalo.emmanuel18@gmail.com>
Date: Wed, 29 Apr 2026 09:58:07 +0100
Subject: [PATCH] feat: build course video player UI with play button, side
 controls, and completed state

---
 src/app/dashboard/courses/[id]/page.tsx       | 73 +++++++++++++++---
 .../dashboard/CourseVideoPlayer.tsx           | 76 +++++++++++++++++++
 2 files changed, 137 insertions(+), 12 deletions(-)
 create mode 100644 src/components/dashboard/CourseVideoPlayer.tsx

diff --git a/src/app/dashboard/courses/[id]/page.tsx b/src/app/dashboard/courses/[id]/page.tsx
index dba0e59..c44be50 100644
--- a/src/app/dashboard/courses/[id]/page.tsx
+++ b/src/app/dashboard/courses/[id]/page.tsx
@@ -6,10 +6,22 @@ import SummaryTabContent from "@/components/dashboard/SummaryTabContent";
 import ResourcesTabContent from "@/components/dashboard/ResourcesTabContent";
 import TaskTabContent from "@/components/dashboard/TaskTabContent";
 import CourseContentTrackerSidebar from "@/components/dashboard/CourseContentTrackerSidebar";
+import CourseVideoPlayer from "@/components/dashboard/CourseVideoPlayer";
+import { Checkbox } from "@/components/ui/Checkbox";
 import image1 from "../../../../../public/Image (1).png";
 
 type TabId = "overview" | "resources" | "tasks" | "summary";
 
+const LESSONS = [
+  { id: 1, title: "Lesson 1: Intro to Digital Technology", duration: "5 min" },
+  { id: 2, title: "Lesson 2: Blockchain Basics", duration: "5 min" },
+  { id: 3, title: "Lesson 3: Smart Contracts", duration: "5 min" },
+  { id: 4, title: "Lesson 4: DeFi Fundamentals", duration: "5 min" },
+  { id: 5, title: "Lesson 5: Web3 Wallets", duration: "5 min" },
+  { id: 6, title: "Lesson 6: dApp Development", duration: "5 min" },
+  { id: 7, title: "Lesson 7: Token Standards", duration: "5 min" },
+];
+
 interface Params {
   id: string;
 }
@@ -102,6 +114,8 @@ const COURSE_DATA: Record<
 export default function CourseDetailsPage({ params }: { params: Params }) {
   const courseData = COURSE_DATA[params.id];
   const [activeTab, setActiveTab] = useState<TabId>("overview");
+  const [currentLesson, setCurrentLesson] = useState(0);
+  const [completed, setCompleted] = useState(false);
 
   if (!courseData) {
     return (
@@ -111,26 +125,49 @@ export default function CourseDetailsPage({ params }: { params: Params }) {
     );
   }
 
+  const handlePrevious = () =>
+    setCurrentLesson((prev) => Math.max(0, prev - 1));
+  const handleNext = () =>
+    setCurrentLesson((prev) => Math.min(LESSONS.length - 1, prev + 1));
+
   return (
     <div className="space-y-6 pb-12">
-      <div className="space-y-4">
-        <div className="relative w-full h-64 rounded-lg overflow-hidden bg-gray-900">
-          <img
-            src={courseData.image}
-            alt={courseData.title}
-            className="w-full h-full object-cover"
-          />
-        </div>
-        <h1 className="text-2xl font-bold text-white">{courseData.title}</h1>
+      {/* Breadcrumb */}
+      <div className="bg-[#1A1520] border border-[#1D1D1C] rounded-xl px-5 py-3 flex items-center gap-3 text-sm">
+        <span className="text-white/60 truncate">{courseData.title}</span>
+        <span className="text-white/30 shrink-0">|</span>
+        <span className="text-white font-medium truncate">
+          {LESSONS[currentLesson].title}
+        </span>
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="lg:col-span-2 space-y-6">
+        {/* Left: video + tabs */}
+        <div className="lg:col-span-2 space-y-4">
+          <CourseVideoPlayer
+            thumbnailSrc={courseData.image}
+            thumbnailAlt={LESSONS[currentLesson].title}
+            onPrevious={handlePrevious}
+            onNext={handleNext}
+          />
+
+          {/* Completed checkbox */}
+          <label className="flex items-center gap-2 cursor-pointer w-fit">
+            <Checkbox
+              checked={completed}
+              onCheckedChange={(val) => setCompleted(Boolean(val))}
+              shape="square"
+              className="border-white/30 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600"
+            />
+            <span className="text-sm text-white/80 select-none">Completed</span>
+          </label>
+
+          {/* Tabs */}
           <div className="flex gap-2 border-b border-[#1D1D1C] overflow-x-auto">
             {[
               { id: "overview" as const, label: "Overview" },
               { id: "resources" as const, label: "Resources" },
-              { id: "tasks" as const, label: "Tasks" },
+              { id: "tasks" as const, label: "Task" },
               { id: "summary" as const, label: "Summary" },
             ].map((tab) => (
               <button
@@ -167,8 +204,20 @@ export default function CourseDetailsPage({ params }: { params: Params }) {
           </div>
         </div>
 
+        {/* Right: tutor + content tracker */}
         <div className="lg:col-span-1">
-          <CourseContentTrackerSidebar />
+          <CourseContentTrackerSidebar
+            lessons={LESSONS.map((l) => ({
+              id: l.id,
+              title: l.title,
+              duration: l.duration,
+            }))}
+            tutorInfo={{
+              name: "Satoshi Nakamoto",
+              role: "Front-End Developer",
+              avatar: "/avatarPlaceholder1.jpg",
+            }}
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/dashboard/CourseVideoPlayer.tsx b/src/components/dashboard/CourseVideoPlayer.tsx
new file mode 100644
index 0000000..17ca118
--- /dev/null
+++ b/src/components/dashboard/CourseVideoPlayer.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import React, { useState } from "react";
+import { Play, SkipBack, SkipForward } from "lucide-react";
+
+interface CourseVideoPlayerProps {
+  thumbnailSrc: string;
+  thumbnailAlt?: string;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  onPlay?: () => void;
+}
+
+export default function CourseVideoPlayer({
+  thumbnailSrc,
+  thumbnailAlt = "Course video thumbnail",
+  onPrevious,
+  onNext,
+  onPlay,
+}: CourseVideoPlayerProps) {
+  const [isPlayHovered, setIsPlayHovered] = useState(false);
+
+  return (
+    <div className="relative w-full aspect-video rounded-xl overflow-hidden bg-[#0B0113]">
+      {/* Thumbnail */}
+      <img
+        src={thumbnailSrc}
+        alt={thumbnailAlt}
+        className="w-full h-full object-cover"
+      />
+
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-black/40" />
+
+      {/* Side nav: Previous */}
+      <button
+        onClick={onPrevious}
+        className="absolute left-4 top-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 rounded-full bg-black/50 border border-white/10 text-white hover:bg-black/70 hover:border-white/30 transition-all duration-200 backdrop-blur-sm"
+        aria-label="Previous lesson"
+      >
+        <SkipBack size={18} />
+      </button>
+
+      {/* Center play button */}
+      <button
+        onClick={onPlay}
+        onMouseEnter={() => setIsPlayHovered(true)}
+        onMouseLeave={() => setIsPlayHovered(false)}
+        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center transition-all duration-200"
+        aria-label="Play video"
+      >
+        <span
+          className={`flex items-center justify-center w-16 h-16 rounded-full border-2 border-white bg-white/10 backdrop-blur-sm transition-all duration-200 ${
+            isPlayHovered
+              ? "bg-white/25 scale-110 shadow-[0_0_32px_rgba(255,255,255,0.25)]"
+              : ""
+          }`}
+        >
+          <Play
+            size={28}
+            className="text-white fill-white translate-x-0.5"
+          />
+        </span>
+      </button>
+
+      {/* Side nav: Next */}
+      <button
+        onClick={onNext}
+        className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 rounded-full bg-black/50 border border-white/10 text-white hover:bg-black/70 hover:border-white/30 transition-all duration-200 backdrop-blur-sm"
+        aria-label="Next lesson"
+      >
+        <SkipForward size={18} />
+      </button>
+    </div>
+  );
+}