added github, premium links
This commit is contained in:
paul
@@ -15,6 +15,7 @@
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
@@ -24,7 +25,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>PyUI builder</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
52
src/assets/logo/bmc.svg
Normal file
52
src/assets/logo/bmc.svg
Normal file
@@ -0,0 +1,52 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.0" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 600 450" style="enable-background:new 0 0 600 450;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#010202;}
|
||||
.st1{fill:#FFDD06;}
|
||||
</style>
|
||||
<path class="st0" d="M390.1,137.3l-0.2-0.1l-0.5-0.2C389.5,137.2,389.8,137.3,390.1,137.3z"/>
|
||||
<path class="st0" d="M393.4,160.9l-0.3,0.1L393.4,160.9z"/>
|
||||
<path class="st0" d="M390.1,137.2C390.1,137.2,390.1,137.2,390.1,137.2C390,137.2,390,137.2,390.1,137.2
|
||||
C390.1,137.2,390.1,137.2,390.1,137.2z"/>
|
||||
<path class="st0" d="M393.1,160.7l0.4-0.2l0.1-0.1l0.1-0.1C393.5,160.4,393.3,160.6,393.1,160.7z"/>
|
||||
<path class="st0" d="M390.7,137.8l-0.4-0.4l-0.3-0.1C390.2,137.5,390.4,137.7,390.7,137.8z"/>
|
||||
<path class="st0" d="M297,366.2c-0.3,0.1-0.6,0.3-0.8,0.6l0.2-0.2C296.7,366.4,296.9,366.3,297,366.2z"/>
|
||||
<path class="st0" d="M351.5,355.4c0-0.3-0.2-0.3-0.1,0.9c0-0.1,0-0.2,0.1-0.3C351.4,355.9,351.4,355.7,351.5,355.4z"/>
|
||||
<path class="st0" d="M345.8,366.2c-0.3,0.1-0.6,0.3-0.8,0.6l0.2-0.2C345.5,366.4,345.7,366.3,345.8,366.2z"/>
|
||||
<path class="st0" d="M258.7,368.7c-0.2-0.2-0.5-0.3-0.8-0.4c0.2,0.1,0.5,0.2,0.6,0.3L258.7,368.7z"/>
|
||||
<path class="st0" d="M250.2,360.5c0-0.3-0.1-0.7-0.3-1C250,359.8,250.1,360.1,250.2,360.5L250.2,360.5z"/>
|
||||
<path class="st1" d="M308,212.8c-11.8,5.1-25.3,10.8-42.7,10.8c-7.3,0-14.5-1-21.5-3l12,123.6c0.4,5.2,2.8,10,6.6,13.5
|
||||
c3.8,3.5,8.8,5.5,14,5.5c0,0,17.1,0.9,22.8,0.9c6.1,0,24.5-0.9,24.5-0.9c5.2,0,10.2-1.9,14-5.5c3.8-3.5,6.2-8.3,6.6-13.5l12.9-136.5
|
||||
c-5.8-2-11.6-3.3-18.1-3.3C327.7,204.4,318.6,208.3,308,212.8z"/>
|
||||
<path class="st0" d="M206.5,160.2l0.2,0.2l0.1,0.1C206.8,160.3,206.7,160.2,206.5,160.2z"/>
|
||||
<path class="st0" d="M412.8,148.7l-1.8-9.1c-1.6-8.2-5.3-16-13.7-18.9c-2.7-0.9-5.8-1.4-7.8-3.3c-2.1-2-2.7-5-3.2-7.8
|
||||
c-0.9-5.2-1.7-10.4-2.6-15.6c-0.8-4.5-1.4-9.5-3.4-13.5c-2.7-5.5-8.2-8.7-13.7-10.8c-2.8-1-5.7-1.9-8.6-2.7
|
||||
c-13.7-3.6-28.1-4.9-42.2-5.7c-16.9-0.9-33.9-0.7-50.8,0.8c-12.6,1.1-25.8,2.5-37.7,6.9c-4.4,1.6-8.9,3.5-12.2,6.9
|
||||
c-4.1,4.1-5.4,10.6-2.4,15.7c2.1,3.7,5.7,6.3,9.5,8c4.9,2.2,10.1,3.9,15.4,5c14.8,3.3,30,4.5,45.1,5.1c16.7,0.7,33.4,0.1,50.1-1.6
|
||||
c4.1-0.5,8.2-1,12.3-1.6c4.8-0.7,7.9-7.1,6.5-11.4c-1.7-5.3-6.3-7.3-11.4-6.5c-0.8,0.1-1.5,0.2-2.3,0.3l-0.5,0.1
|
||||
c-1.8,0.2-3.5,0.4-5.3,0.6c-3.6,0.4-7.2,0.7-10.9,1c-8.1,0.6-16.3,0.8-24.5,0.8c-8,0-16-0.2-24-0.8c-3.7-0.2-7.3-0.5-10.9-0.9
|
||||
c-1.7-0.2-3.3-0.4-4.9-0.6l-1.6-0.2l-0.3,0l-1.6-0.2c-3.3-0.5-6.6-1.1-9.9-1.8c-0.3-0.1-0.6-0.3-0.8-0.5s-0.3-0.6-0.3-0.9
|
||||
c0-0.3,0.1-0.7,0.3-0.9s0.5-0.4,0.8-0.5h0.1c2.8-0.6,5.7-1.1,8.6-1.6c1-0.2,1.9-0.3,2.9-0.4h0c1.8-0.1,3.6-0.4,5.4-0.7
|
||||
c15.6-1.6,31.3-2.2,47-1.7c7.6,0.2,15.2,0.7,22.8,1.4c1.6,0.2,3.3,0.3,4.9,0.5c0.6,0.1,1.2,0.2,1.9,0.2l1.3,0.2
|
||||
c3.7,0.5,7.3,1.2,11,2c5.4,1.2,12.3,1.6,14.7,7.4c0.8,1.9,1.1,3.9,1.5,5.9l0.5,2.5c0,0,0,0.1,0,0.1c1.3,5.9,2.5,11.8,3.8,17.7
|
||||
c0.1,0.4,0.1,0.9,0,1.3c-0.1,0.4-0.3,0.9-0.5,1.2c-0.3,0.4-0.6,0.7-1,0.9c-0.4,0.2-0.8,0.4-1.2,0.4h0l-0.8,0.1l-0.8,0.1
|
||||
c-2.4,0.3-4.9,0.6-7.3,0.9c-4.8,0.5-9.6,1-14.4,1.4c-9.6,0.8-19.1,1.3-28.7,1.6c-4.9,0.1-9.8,0.2-14.7,0.2
|
||||
c-19.5,0-38.9-1.1-58.2-3.4c-2.1-0.2-4.2-0.5-6.3-0.8c1.6,0.2-1.2-0.2-1.7-0.2c-1.3-0.2-2.7-0.4-4-0.6c-4.5-0.7-8.9-1.5-13.4-2.2
|
||||
c-5.4-0.9-10.5-0.4-15.4,2.2c-4,2.2-7.2,5.5-9.3,9.6c-2.1,4.3-2.7,9.1-3.7,13.7c-0.9,4.7-2.4,9.7-1.8,14.5
|
||||
c1.2,10.3,8.4,18.7,18.8,20.6c9.8,1.8,19.6,3.2,29.5,4.4c38.7,4.7,77.9,5.3,116.7,1.7c3.2-0.3,6.3-0.6,9.5-1c1-0.1,2,0,2.9,0.3
|
||||
c0.9,0.3,1.8,0.9,2.5,1.6c0.7,0.7,1.2,1.5,1.6,2.5c0.3,0.9,0.5,1.9,0.4,2.9l-1,9.6c-2,19.3-4,38.6-5.9,58
|
||||
c-2.1,20.3-4.1,40.6-6.2,60.9c-0.6,5.7-1.2,11.4-1.8,17.1c-0.6,5.6-0.6,11.4-1.7,17c-1.7,8.7-7.6,14.1-16.2,16.1
|
||||
c-7.9,1.8-16,2.7-24.1,2.8c-9,0-18-0.3-27-0.3c-9.6,0.1-21.4-0.8-28.8-8c-6.5-6.3-7.4-16.1-8.3-24.6c-1.2-11.2-2.4-22.5-3.5-33.7
|
||||
l-6.5-62.5l-4.2-40.5c-0.1-0.7-0.1-1.3-0.2-2c-0.5-4.8-3.9-9.5-9.3-9.3c-4.6,0.2-9.8,4.1-9.3,9.3l3.1,30l6.5,62
|
||||
c1.8,17.6,3.7,35.2,5.5,52.9c0.4,3.4,0.7,6.8,1.1,10.1c2,18.5,16.1,28.4,33.6,31.2c10.2,1.6,20.6,2,31,2.1
|
||||
c13.3,0.2,26.7,0.7,39.7-1.7c19.3-3.5,33.8-16.4,35.9-36.5c0.6-5.8,1.2-11.6,1.8-17.3c2-19.1,3.9-38.2,5.9-57.4l6.4-62.5l2.9-28.6
|
||||
c0.1-1.4,0.7-2.8,1.7-3.8s2.2-1.8,3.6-2c5.5-1.1,10.8-2.9,14.7-7.1C413.8,166.2,415,157.5,412.8,148.7z M205,154.9
|
||||
c0.1,0-0.1,0.7-0.1,1C204.8,155.4,204.8,154.9,205,154.9z M205.5,159c0,0,0.2,0.1,0.3,0.4C205.6,159.2,205.5,159,205.5,159
|
||||
L205.5,159z M206,159.7C206.2,160.1,206.3,160.3,206,159.7L206,159.7z M207.1,160.6L207.1,160.6
|
||||
C207.1,160.6,207.2,160.6,207.1,160.6C207.1,160.6,207.1,160.6,207.1,160.6L207.1,160.6z M392.5,159.3c-2,1.9-5,2.8-7.9,3.2
|
||||
c-33.1,4.9-66.8,7.4-100.3,6.3c-24-0.8-47.7-3.5-71.5-6.8c-2.3-0.3-4.8-0.8-6.4-2.5c-3-3.2-1.5-9.7-0.7-13.7
|
||||
c0.7-3.6,2.1-8.4,6.4-8.9c6.6-0.8,14.4,2,20.9,3c7.9,1.2,15.9,2.2,23.8,2.9c34,3.1,68.7,2.6,102.5-1.9c6.2-0.8,12.3-1.8,18.5-2.9
|
||||
c5.5-1,11.5-2.8,14.8,2.8c2.3,3.9,2.6,9,2.2,13.4C394.8,156.2,393.9,158,392.5,159.3L392.5,159.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/assets/logo/ko-fi.png
Normal file
BIN
src/assets/logo/ko-fi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@@ -1,6 +1,11 @@
|
||||
import { useEffect, useRef, useMemo, useState } from "react";
|
||||
|
||||
import { CloseCircleFilled } from "@ant-design/icons";
|
||||
import { CloseCircleFilled, CrownFilled, GithubFilled, ShareAltOutlined } from "@ant-design/icons";
|
||||
|
||||
import KO_FI from "../assets/logo/ko-fi.png"
|
||||
import Premium from "./utils/premium";
|
||||
import Share from "./utils/share";
|
||||
|
||||
|
||||
|
||||
function Sidebar({tabs}){
|
||||
@@ -44,7 +49,7 @@ function Sidebar({tabs}){
|
||||
|
||||
return (
|
||||
<div className={`tw-relative tw-duration-[0.3s] tw-transition-all
|
||||
tw-max-w-[350px] tw-flex tw-h-full tw-z-10
|
||||
tw-max-w-[350px] tw-flex tw-h-full tw-z-10 tw-shadow-xl
|
||||
${sidebarOpen ? "tw-bg-white tw-min-w-[350px] tw-w-[350px] tw-shadow-lg":
|
||||
"tw-bg-primaryBg tw-min-w-[80px] tw-w-[80px]"}
|
||||
`}
|
||||
@@ -77,6 +82,25 @@ function Sidebar({tabs}){
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
<div className="tw-flex tw-flex-col tw-place-content-items tw-place-items-center tw-gap-3 tw-mt-auto">
|
||||
<Premium className="tw-text-2xl tw-bg-purple-700 tw-text-center
|
||||
tw-w-[35px] tw-h-[35px] tw-rounded-md
|
||||
tw-cursor-pointer tw-text-white
|
||||
tw-transition-all
|
||||
hover:tw-scale-[1.2]">
|
||||
<CrownFilled />
|
||||
</Premium>
|
||||
<Share className="tw-cursor-pointer tw-text-xl">
|
||||
<ShareAltOutlined />
|
||||
</Share>
|
||||
<a href="https://github.com/PaulleDemon/tkbuilder" className="tw-text-2xl tw-cursor-pointer tw-text-black">
|
||||
<GithubFilled />
|
||||
</a>
|
||||
<a href="https://ko-fi.com/artpaul" className="tw-cursor-pointer ">
|
||||
<img src={KO_FI} alt="ko-fi" className="tw-w-[30px] tw-h-[30px]"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tw-w-full tw-h-full tw-bg-inherit tw-flex tw-flex-col tw-overflow-x-hidden" ref={sideBarExtraRef}>
|
||||
|
||||
268
src/sidebar/utils/premium.js
Normal file
268
src/sidebar/utils/premium.js
Normal file
@@ -0,0 +1,268 @@
|
||||
import { useState } from "react"
|
||||
|
||||
import { Modal } from "antd"
|
||||
import { CrownFilled } from "@ant-design/icons"
|
||||
|
||||
|
||||
function Premium({ children, className = "" }) {
|
||||
|
||||
const [premiumModalOpen, setPremiumModalOpen] = useState(false)
|
||||
|
||||
|
||||
const onClick = () => {
|
||||
setPremiumModalOpen(true)
|
||||
}
|
||||
|
||||
const onClose = (event) => {
|
||||
event.stopPropagation()
|
||||
setPremiumModalOpen(false)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div onClick={onClick} className={`${className}`}>
|
||||
{children}
|
||||
<Modal
|
||||
title={<h3 className="tw-text-xl tw-font-medium">Buy Pre-order one Time License</h3>}
|
||||
style={{ zIndex: 14000, gap: '10px', maxWidth: '80vw', placeItems: "center" }}
|
||||
onCancel={onClose}
|
||||
centered
|
||||
onOk={onClose}
|
||||
footer={null}
|
||||
width={'auto'}
|
||||
open={premiumModalOpen}
|
||||
>
|
||||
<div className="tw-mt-5 tw-text-lg tw-max-w-[850px] tw-w-full ">
|
||||
I am Paul, an open-source dev, funding open-source projects by providing custom works.
|
||||
If you find this tool useful and want to support its development, consider buying a <b>one time license</b>.
|
||||
<br />
|
||||
<br />
|
||||
By buying pre-order license, you get advance features, priority support, early access, upcoming features, and more.
|
||||
<a
|
||||
href="https://github.com/PaulleDemon/tab=readme-ov-file"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className="!tw-text-blue-500"
|
||||
>
|
||||
more.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section className="tw-mt-1 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-[2%] max-lg:tw-p-2" id="pricing">
|
||||
<h3 className="tw-text-2xl tw-font-medium max-md:tw-text-2xl">Choose your plan</h3>
|
||||
<div className="tw-mt-10 tw-flex tw-place-content-center tw-gap-8 max-lg:tw-flex-col">
|
||||
{/* Free Plan */}
|
||||
<div className="tw-flex tw-w-[380px] tw-border-[1px] tw-border-gray-500 tw-border-solid tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
|
||||
<h3>
|
||||
<span className="tw-text-5xl tw-font-semibold">$0</span>
|
||||
</h3>
|
||||
<p className="tw-mt-3 tw-text-base tw-text-center tw-text-gray-600">
|
||||
Free to use forever, but for added features and to support open-source development, consider buying a lifetime license.
|
||||
</p>
|
||||
<hr />
|
||||
<ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Access to web-based editor</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Commercial use</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Access to UI builder exe for local development</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Support for PySlide/PyQt</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Preview live</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Save and load files</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Load plugins locally</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Dark theme</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Priority support</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Early access to new features</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Paid Plan */}
|
||||
<div className="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-2 tw-border-solid
|
||||
tw-border-blue-500 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
|
||||
<div className="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
|
||||
Limited time offer
|
||||
</div>
|
||||
<div className="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
|
||||
Hobby
|
||||
</div>
|
||||
<h3>
|
||||
<span className="tw-text-5xl tw-font-semibold">
|
||||
<s className="tw-font-medium tw-text-4xl">$129</s>
|
||||
<span>$29</span>
|
||||
</span>
|
||||
<span className="tw-text-2xl tw-text-gray-600">Forever</span>
|
||||
</h3>
|
||||
<p className="tw-mt-3 tw-text-center tw-text-gray-600">
|
||||
Support open-source development 🚀. Plus, get added benefits.
|
||||
</p>
|
||||
<hr />
|
||||
<ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Access to web-based editor</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Access to UI builder exe for local development</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Preview live</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Save and load files</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Load plugins locally</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Dark theme</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Priority support</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Early access to new features</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Support for PySlide/PyQt</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
|
||||
<span>Commercial use</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<a
|
||||
href=""
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className="tw-mt-8 !tw-bg-purple-500 !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md !tw-font-semibold tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
|
||||
>
|
||||
<span>Buy License</span>
|
||||
<CrownFilled />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Paid Plan */}
|
||||
<div className="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-2 tw-border-solid
|
||||
tw-border-green-600 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
|
||||
<div className="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
|
||||
Limited time offer
|
||||
</div>
|
||||
<div className="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
|
||||
Commercial
|
||||
</div>
|
||||
<h3>
|
||||
<span className="tw-text-5xl tw-font-semibold">
|
||||
<s className="tw-font-medium tw-text-4xl">$180</s>
|
||||
<span>$49</span>
|
||||
</span>
|
||||
<span className="tw-text-2xl tw-text-gray-600">Forever</span>
|
||||
</h3>
|
||||
<p className="tw-mt-3 tw-text-center tw-text-gray-600">
|
||||
Support open-source development 🚀. Plus, get added benefits.
|
||||
</p>
|
||||
<hr />
|
||||
<ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Access to web-based editor</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Access to UI builder exe for local development</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Preview live</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Save and load files</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Load plugins locally</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Dark theme</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Priority support</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Early access to new features</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Support for PySlide/PyQt</span>
|
||||
</li>
|
||||
<li className="tw-flex tw-place-items-center tw-gap-2">
|
||||
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
|
||||
<span>Commercial use</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<a
|
||||
href=""
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className="tw-mt-8 !tw-bg-purple-500 !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md !tw-font-semibold tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
|
||||
>
|
||||
<span>Buy License</span>
|
||||
<CrownFilled />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default Premium
|
||||
110
src/sidebar/utils/share.js
Normal file
110
src/sidebar/utils/share.js
Normal file
@@ -0,0 +1,110 @@
|
||||
import { useMemo, useState } from "react"
|
||||
|
||||
import { Modal, message } from "antd"
|
||||
import { CopyOutlined, FacebookFilled, LinkedinFilled, MediumCircleFilled, RedditCircleFilled, TwitchFilled, TwitterCircleFilled } from "@ant-design/icons"
|
||||
|
||||
|
||||
function Share({children, className=""}){
|
||||
|
||||
const [shareModalOpen, setShareModalOpen] = useState(false)
|
||||
|
||||
const shareInfo = useMemo(() => {
|
||||
|
||||
return {
|
||||
url: encodeURI("https://github.com/PaulleDemon/font-tester-chrome"),
|
||||
text: "Check out Framework agnostic GUI builder for python"
|
||||
}
|
||||
}, [])
|
||||
|
||||
const onClick = () => {
|
||||
setShareModalOpen(true)
|
||||
}
|
||||
|
||||
const onClose = (event) => {
|
||||
event.stopPropagation()
|
||||
setShareModalOpen(false)
|
||||
}
|
||||
|
||||
const onCopy = (event) => {
|
||||
event.stopPropagation()
|
||||
navigator.clipboard.writeText(`Check out Font tester: ${shareInfo.url}`).then(function() {
|
||||
message.success("Link copied to clipboard")
|
||||
|
||||
}, function(err) {
|
||||
message.error("Error copying to clipboard")
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div onClick={onClick} className={className}>
|
||||
{children}
|
||||
<Modal title={<h3 className="tw-text-xl tw-font-medium">Share FontTester</h3>}
|
||||
styles={{wrapper: {zIndex: 14000, gap: "10px"}}}
|
||||
onCancel={onClose}
|
||||
onOk={onClose}
|
||||
footer={null}
|
||||
open={shareModalOpen}>
|
||||
|
||||
<div className="tw-mt-5 tw-flex tw-place-content-center tw-w-full tw-place-items-center">
|
||||
<a onClick={onCopy}
|
||||
className="hover:!tw-bg-gray-100 hover:!tw-color-black !tw-text-4xl"
|
||||
style={{width: "80px", height: "80px", outline: "none", border: "none", color: "#000",
|
||||
backgroundColor: "transparent", display: "flex", justifyContent: "center",
|
||||
padding: "0.5rem 0.75rem", borderRadius: "0.375rem"}}>
|
||||
<CopyOutlined />
|
||||
</a>
|
||||
|
||||
<a href={`https://www.reddit.com/submit?url=${shareInfo.url}&title=${encodeURIComponent(shareInfo.text)}`}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className="hover:!tw-bg-gray-100 hover:!tw-color-black !tw-text-4xl"
|
||||
style={{width: "80px", height: "80px", outline: "none", border: "none", color: "#000",
|
||||
backgroundColor: "transparent", display: "flex", justifyContent: "center",
|
||||
padding: "0.5rem 0.75rem", borderRadius: "0.375rem"}}>
|
||||
<RedditCircleFilled />
|
||||
</a>
|
||||
|
||||
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=${shareInfo.url}&title=${encodeURIComponent(shareInfo.text)}`}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className="hover:!tw-bg-gray-100 hover:!tw-color-black !tw-text-4xl"
|
||||
style={{width: "80px", height: "80px", outline: "none", border: "none", color: "#000",
|
||||
backgroundColor: "transparent", display: "flex", justifyContent: "center",
|
||||
padding: "0.5rem 0.75rem", borderRadius: "0.375rem"}}>
|
||||
<LinkedinFilled />
|
||||
</a>
|
||||
|
||||
<a href={`https://www.facebook.com/sharer/sharer.php?u=${shareInfo.url}`}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className="hover:!tw-bg-gray-100 hover:!tw-color-black !tw-text-4xl"
|
||||
style={{width: "80px", height: "80px", outline: "none", border: "none", color: "#000",
|
||||
backgroundColor: "transparent", display: "flex", justifyContent: "center",
|
||||
padding: "0.5rem 0.75rem", borderRadius: "0.375rem"}}>
|
||||
<FacebookFilled />
|
||||
</a>
|
||||
|
||||
<a href="https://medium.com/new-story"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className="hover:!tw-bg-gray-100 hover:!tw-color-black !tw-text-4xl"
|
||||
style={{width: "80px", height: "80px", outline: "none", border: "none", color: "#000",
|
||||
backgroundColor: "transparent", display: "flex", justifyContent: "center",
|
||||
padding: "0.5rem 0.75rem", borderRadius: "0.375rem"}}>
|
||||
<MediumCircleFilled />
|
||||
</a>
|
||||
|
||||
<a href={`https://twitter.com/share?url=${shareInfo.url}&text=${encodeURIComponent(shareInfo.text)}`}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className="hover:!tw-bg-gray-100 hover:!tw-color-black !tw-text-4xl"
|
||||
style={{width: "80px", height: "80px", outline: "none", border: "none", color: "#000",
|
||||
backgroundColor: "transparent", display: "flex", justifyContent: "center",
|
||||
padding: "0.5rem 0.75rem", borderRadius: "0.375rem"}}>
|
||||
<TwitterCircleFilled />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default Share
|
||||
Reference in New Issue
Block a user