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

added github, premium links

Browse Source
This commit is contained in:
paul
2024-09-19 22:09:55 +05:30
parent c32baab268
commit 59bf55e175
6 changed files with 458 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/sidebar/utils/share.js Normal file
View 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