Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added demo video

Browse Source
This commit is contained in:
paul
2025-03-14 11:21:08 +05:30
parent 9fad1bc5a1
commit dc892e6f61
2 changed files with 70 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/header.js
View File

@@ -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

47
src/components/video-popup.js Normal file
View File

@@ -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