110 lines
5.9 KiB
JavaScript
110 lines
5.9 KiB
JavaScript
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/PyUIBuilder"),
|
|
text: "Check out this 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 PyUI Builder with others</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 |