42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { LinkIcon } from '@heroicons/react/outline'
|
|
import clsx from 'clsx'
|
|
|
|
import { copyToClipboard } from 'web/lib/util/copy'
|
|
import { ToastClipboard } from 'web/components/toast-clipboard'
|
|
import { track } from 'web/lib/service/analytics'
|
|
import { IconButton } from './button'
|
|
|
|
export function ShareIconButton(props: {
|
|
toastClassName?: string
|
|
children?: React.ReactNode
|
|
iconClassName?: string
|
|
copyPayload: string
|
|
}) {
|
|
const { toastClassName, children, iconClassName, copyPayload } = props
|
|
const [showToast, setShowToast] = useState(false)
|
|
|
|
return (
|
|
<div className="relative z-10 flex-shrink-0">
|
|
<IconButton
|
|
size="2xs"
|
|
className={clsx('mt-1', showToast ? 'text-indigo-600' : '')}
|
|
onClick={() => {
|
|
copyToClipboard(copyPayload)
|
|
track('copy share link')
|
|
setShowToast(true)
|
|
setTimeout(() => setShowToast(false), 2000)
|
|
}}
|
|
>
|
|
<LinkIcon
|
|
className={clsx(iconClassName ? iconClassName : 'h-5 w-5')}
|
|
aria-hidden="true"
|
|
/>
|
|
{children}
|
|
</IconButton>
|
|
|
|
{showToast && <ToastClipboard className={toastClassName} />}
|
|
</div>
|
|
)
|
|
}
|