diff --git a/public/index.html b/public/index.html
index aa069f2..376e91b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
+
-
diff --git a/src/sidebar/utils/premium.js b/src/sidebar/utils/premium.js
new file mode 100644
index 0000000..6e1c865
--- /dev/null
+++ b/src/sidebar/utils/premium.js
@@ -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 (
+
+ {children}
+
Buy Pre-order one Time License}
+ style={{ zIndex: 14000, gap: '10px', maxWidth: '80vw', placeItems: "center" }}
+ onCancel={onClose}
+ centered
+ onOk={onClose}
+ footer={null}
+ width={'auto'}
+ open={premiumModalOpen}
+ >
+
+ 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
one time license .
+
+
+ By buying pre-order license, you get advance features, priority support, early access, upcoming features, and more.
+
+ more.
+
+
+
+
+ Choose your plan
+
+ {/* Free Plan */}
+
+
+ $0
+
+
+ Free to use forever, but for added features and to support open-source development, consider buying a lifetime license.
+
+
+
+
+
+ Access to web-based editor
+
+
+
+ Commercial use
+
+
+
+ Access to UI builder exe for local development
+
+
+
+ Support for PySlide/PyQt
+
+
+
+ Preview live
+
+
+
+ Save and load files
+
+
+
+ Load plugins locally
+
+
+
+ Dark theme
+
+
+
+ Priority support
+
+
+
+ Early access to new features
+
+
+
+
+
+ {/* Paid Plan */}
+
+
+ Limited time offer
+
+
+ Hobby
+
+
+
+ $129
+ $29
+
+ Forever
+
+
+ Support open-source development 🚀. Plus, get added benefits.
+
+
+
+
+
+ Access to web-based editor
+
+
+
+ Access to UI builder exe for local development
+
+
+
+ Preview live
+
+
+
+ Save and load files
+
+
+
+ Load plugins locally
+
+
+
+ Dark theme
+
+
+
+ Priority support
+
+
+
+ Early access to new features
+
+
+
+ Support for PySlide/PyQt
+
+
+
+ Commercial use
+
+
+
+
+
+ Buy License
+
+
+
+
+ {/* Paid Plan */}
+
+
+ Limited time offer
+
+
+ Commercial
+
+
+
+ $180
+ $49
+
+ Forever
+
+
+ Support open-source development 🚀. Plus, get added benefits.
+
+
+
+
+
+ Access to web-based editor
+
+
+
+ Access to UI builder exe for local development
+
+
+
+ Preview live
+
+
+
+ Save and load files
+
+
+
+ Load plugins locally
+
+
+
+ Dark theme
+
+
+
+ Priority support
+
+
+
+ Early access to new features
+
+
+
+ Support for PySlide/PyQt
+
+
+
+ Commercial use
+
+
+
+
+
+ Buy License
+
+
+
+
+
+
+
+
+
+
+ )
+
+}
+
+export default Premium
\ No newline at end of file
diff --git a/src/sidebar/utils/share.js b/src/sidebar/utils/share.js
new file mode 100644
index 0000000..a07e768
--- /dev/null
+++ b/src/sidebar/utils/share.js
@@ -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 (
+
+ {children}
+
Share FontTester}
+ styles={{wrapper: {zIndex: 14000, gap: "10px"}}}
+ onCancel={onClose}
+ onOk={onClose}
+ footer={null}
+ open={shareModalOpen}>
+
+
+
+
+
+
+ )
+
+}
+
+export default Share
\ No newline at end of file