75 lines
3.3 KiB
JavaScript
75 lines
3.3 KiB
JavaScript
import { useEffect, useState } from "react"
|
|
|
|
import { Select, Input, Button } from "antd"
|
|
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 = [
|
|
{
|
|
value: FrameWorks.TKINTER,
|
|
label: 'tkinter',
|
|
},
|
|
{
|
|
value: FrameWorks.CUSTOMTK,
|
|
label: 'customtk',
|
|
},
|
|
]
|
|
|
|
|
|
function Header({projectName, onProjectNameChange, framework, onFrameworkChange,
|
|
onExportClick, className=''}){
|
|
|
|
|
|
return (
|
|
<div className={`tw-w-full tw-bg-primaryBg tw-gap-2 tw-overflow-x-auto tw-p-2 tw-flex tw-place-items-center
|
|
${className||''}`}>
|
|
|
|
<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="👋"
|
|
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">
|
|
Get Updates
|
|
</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
|
|
tw-transition-all
|
|
hover:tw-scale-[1.2]">
|
|
<CrownFilled />
|
|
</Premium>
|
|
<Input value={projectName} onChange={(e) => onProjectNameChange(e.target.value)} placeholder="project name"/>
|
|
<Button icon={<DownloadOutlined />} onClick={onExportClick}>
|
|
Export code
|
|
</Button>
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
export default Header |