From 06747df054398940285a6cd8f9b29f8d3a7a3cf7 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 19 Feb 2025 14:36:32 +0000
Subject: [PATCH] Add platform demo

---
 src/components/SQLCourse/PlatformDemo.tsx | 50 ++++++++++-------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/components/SQLCourse/PlatformDemo.tsx b/src/components/SQLCourse/PlatformDemo.tsx
index 955923f5c..9fd14fba5 100644
--- a/src/components/SQLCourse/PlatformDemo.tsx
+++ b/src/components/SQLCourse/PlatformDemo.tsx
@@ -1,40 +1,34 @@
 import { SectionHeader } from './SectionHeader';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { Play } from 'lucide-react';
+import { VideoModal } from '../VideoModal';
 
 export function PlatformDemo() {
-  const [isZoomed, setIsZoomed] = useState(false);
-
-  useEffect(() => {
-    function onScroll() {
-      if (isZoomed) {
-        setIsZoomed(false);
-      }
-    }
-
-    window.addEventListener('scroll', onScroll);
-    return () => window.removeEventListener('scroll', onScroll);
-  }, [isZoomed]);
+  const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
 
   return (
     <>
-      {isZoomed && (
+      {isVideoModalOpen && (
+        <VideoModal
+          videoId="6S1CcF-ngeQ"
+          onClose={() => setIsVideoModalOpen(false)}
+        />
+      )}
+      <div className="relative mt-12 w-full max-w-5xl sm:mt-20">
+        <img
+          src="https://assets.roadmap.sh/guest/course-environment-87jg8.png"
+          alt="Course Environment"
+          className="w-full rounded-xl"
+        />
         <div
-          onClick={() => setIsZoomed(false)}
-          className="fixed inset-0 z-[999] flex cursor-zoom-out items-center justify-center bg-black bg-opacity-75"
+          onClick={() => setIsVideoModalOpen(true)}
+          className="group absolute inset-0 flex cursor-pointer items-center justify-center rounded-xl bg-black/40 transition-all hover:bg-black/50"
         >
-          <img
-            src="https://assets.roadmap.sh/guest/course-environment-87jg8.png"
-            alt="Course Environment"
-            className="max-h-[90vh] max-w-[90vw] rounded-xl object-contain"
-          />
+          <div className="flex size-12 items-center justify-center rounded-full bg-white/90 transition-transform group-hover:scale-105 lg:size-16">
+            <Play className="ml-1 fill-current text-black lg:size-8" />
+          </div>
         </div>
-      )}
-      <img
-        src="https://assets.roadmap.sh/guest/course-environment-87jg8.png"
-        alt="Course Environment"
-        onClick={() => setIsZoomed(true)}
-        className="mt-12 sm:mt-20 w-full max-w-5xl rounded-xl cursor-zoom-in"
-      />
+      </div>
     </>
   );
 }