From dc892e6f61b2da9defdbef4aeb1583c617796c13 Mon Sep 17 00:00:00 2001
From: paul <paul.sajo.official@gmail.com>
Date: Fri, 14 Mar 2025 11:21:08 +0530
Subject: [PATCH] added demo video

---
 src/components/header.js      | 35 +++++++++++++++++---------
 src/components/video-popup.js | 47 +++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 src/components/video-popup.js

diff --git a/src/components/header.js b/src/components/header.js
index 3897130..be49931 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react"
 
 import { Select, Input, Button } from "antd"
-import { CrownFilled, DownloadOutlined, DownOutlined } from "@ant-design/icons"
+import { CrownFilled, DownloadOutlined, DownOutlined, PlayCircleFilled, VideoCameraOutlined } from "@ant-design/icons"
 import FrameWorks from "../constants/frameworks"
 import Premium from "../sidebar/utils/premium"
+import VideoPopUp from "./video-popup"
 
 
 const items = [
@@ -26,23 +27,33 @@ function Header({projectName, onProjectNameChange, framework, onFrameworkChange,
         <div className={`tw-w-full tw-bg-primaryBg tw-p-2 tw-flex tw-place-items-center
                              ${className||''}`}>
 
-            <Select
-                // defaultValue={framework}
-                value={framework}
-                options={items}
-                // onSelect={(key) => {console.log("value: ", key); onFrameworkChange(key); }}
-                onChange={(key) => {onFrameworkChange(key)}}
-                className="tw-min-w-[150px]"
-            />
-            
+            <div className="tw-flex tw-gap-2 tw-place-content-center">
+                <Select
+                    // defaultValue={framework}
+                    value={framework}
+                    options={items}
+                    // onSelect={(key) => {console.log("value: ", key); onFrameworkChange(key); }}
+                    onChange={(key) => {onFrameworkChange(key)}}
+                    className="tw-min-w-[150px]"
+                />
+                <VideoPopUp>
+                    <div className="tw-p-1 tw-w-full tw-outline-none tw-bg-transparent tw-border-[1px] 
+                                            tw-border-gray-400 tw-rounded-md tw-no-underline tw-border-solid hover:tw-bg-[#9333EA]
+                                            hover:tw-text-white tw-duration-200 tw-flex tw-gap-1
+                                            tw-text-black tw-text-center tw-px-4 tw-text-sm tw-cursor-pointer">
+                        Watch demo
+                        <PlayCircleFilled className="tw-text-lg"/>
+                    </div>
+                </VideoPopUp>
+            </div>
             <div className="tw-ml-auto tw-flex tw-gap-2 tw-place-content-center">
-            <button data-tally-open="mVDY7N" data-tally-layout="modal" data-tally-emoji-text="👋" 
+                <button data-tally-open="mVDY7N" data-tally-layout="modal" data-tally-emoji-text="👋" 
                     data-tally-emoji-animation="wave" className="tw-p-1 tw-w-full tw-outline-none tw-bg-transparent tw-border-[1px] 
                                     tw-border-gray-400 tw-rounded-md tw-no-underline tw-border-solid hover:tw-bg-[#9333EA]
                                     hover:tw-text-white tw-duration-200
                                     tw-text-black tw-text-center tw-px-4 tw-text-sm tw-cursor-pointer">
                                         Join Waitlist
-                            </button>
+                </button>
                 <Premium className="tw-text-2xl tw-bg-purple-600 tw-text-center 
                                     tw-w-[40px] tw-min-w-[40px] tw-h-[35px] tw-rounded-md 
                                     tw-cursor-pointer tw-text-white 
diff --git a/src/components/video-popup.js b/src/components/video-popup.js
new file mode 100644
index 0000000..5852e7c
--- /dev/null
+++ b/src/components/video-popup.js
@@ -0,0 +1,47 @@
+import { Modal } from "antd"
+import { useState } from "react"
+
+
+const VideoPopUp = ({children, url}) => {
+
+    const [popUpOpen, setPopUpOpen] = useState(false)
+
+
+    const handleVideoOpen = () => {
+        setPopUpOpen(true)
+    }
+
+    const handleVideoClose = (event) => {
+        event.stopPropagation()
+
+        setPopUpOpen(false)
+    }
+
+    return (
+        <div onClick={handleVideoOpen} >
+            {children}
+
+            <Modal title={"demo"}  
+                style={{ zIndex: 14000, gap: '5px', placeContent: "center", }}
+                className="max-xl:tw-max-w-full max-lg:!tw-max-h-[450px]"
+                styles={{body: {height: "80vh", width: "100%"}, content: {width: "100%",}}}
+                onCancel={handleVideoClose}
+                centered
+                onOk={handleVideoClose}
+                footer={null}
+                width={'90%'}
+                height={1000}
+                open={popUpOpen}>
+                <div className="tw-mt-5 tw-text-lg tw-min-w-[350px] tw-rounded-md tw-overflow-hidden tw-h-full  tw-w-full ">
+                    <iframe  src="https://www.youtube.com/embed/MkeMv0X-w_4?si=lJNCB18a2XKdY7Y6" 
+                        className="tw-w-full tw-h-full"
+                        title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+                    </iframe>
+                </div>
+            </Modal>
+
+        </div>
+    )
+}
+
+export default VideoPopUp
\ No newline at end of file