47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
|
import { LinkIcon } from '@heroicons/react/outline'
|
||
|
|
import toast from 'react-hot-toast'
|
||
|
|
import { copyToClipboard } from 'web/lib/util/copy'
|
||
|
|
import { track } from 'web/lib/service/analytics'
|
||
|
|
import { Modal } from './layout/modal'
|
||
|
|
import { Col } from './layout/col'
|
||
|
|
import { Title } from './title'
|
||
|
|
import { Button } from './button'
|
||
|
|
import { TweetButton } from './tweet-button'
|
||
|
|
import { Row } from './layout/row'
|
||
|
|
|
||
|
|
export function SharePostModal(props: {
|
||
|
|
shareUrl: string
|
||
|
|
isOpen: boolean
|
||
|
|
setOpen: (open: boolean) => void
|
||
|
|
}) {
|
||
|
|
const { isOpen, setOpen, shareUrl } = props
|
||
|
|
|
||
|
|
const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal open={isOpen} setOpen={setOpen} size="md">
|
||
|
|
<Col className="gap-4 rounded bg-white p-4">
|
||
|
|
<Title className="!mt-0 !mb-2" text="Share this post" />
|
||
|
|
<Button
|
||
|
|
size="2xl"
|
||
|
|
color="gradient"
|
||
|
|
className={'mb-2 flex max-w-xs self-center'}
|
||
|
|
onClick={() => {
|
||
|
|
copyToClipboard(shareUrl)
|
||
|
|
toast.success('Link copied!', {
|
||
|
|
icon: linkIcon,
|
||
|
|
})
|
||
|
|
track('copy share post link')
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{linkIcon} Copy link
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Row className="z-0 justify-start gap-4 self-center">
|
||
|
|
<TweetButton className="self-start" tweetText={shareUrl} />
|
||
|
|
</Row>
|
||
|
|
</Col>
|
||
|
|
</Modal>
|
||
|
|
)
|
||
|
|
}
|