stacker.news/components/share.js

70 lines
2.0 KiB
JavaScript
Raw Normal View History

2022-12-19 22:27:52 +00:00
import { Dropdown } from 'react-bootstrap'
import ShareIcon from '../svgs/share-fill.svg'
import copy from 'clipboard-copy'
import { useMe } from './me'
export default function Share ({ item }) {
const me = useMe()
const url = `https://stacker.news/items/${item.id}${me ? `/r/${me.name}` : ''}`
return typeof window !== 'undefined' && navigator?.share
? (
2022-12-19 23:37:31 +00:00
<div className='ml-auto pointer d-flex align-items-center'>
2022-12-19 22:27:52 +00:00
<ShareIcon
2023-05-01 20:58:30 +00:00
width={20} height={20}
2022-12-19 23:37:31 +00:00
className='mx-2 fill-grey theme'
2022-12-19 22:27:52 +00:00
onClick={() => {
if (navigator.share) {
navigator.share({
title: item.title || '',
text: '',
url
}).then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error))
} else {
console.log('no navigator.share')
}
}}
/>
</div>)
: (
2022-12-19 23:21:47 +00:00
<Dropdown alignRight className='ml-auto pointer d-flex align-items-center' as='span'>
2022-12-19 22:27:52 +00:00
<Dropdown.Toggle variant='success' id='dropdown-basic' as='a'>
2023-05-01 20:58:30 +00:00
<ShareIcon width={20} height={20} className='mx-2 fill-grey theme' />
2022-12-19 22:27:52 +00:00
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={async () => {
copy(url)
}}
>
copy link
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>)
}
export function CopyLinkDropdownItem ({ item }) {
const me = useMe()
const url = `https://stacker.news/items/${item.id}${me ? `/r/${me.name}` : ''}`
return (
<Dropdown.Item
onClick={async () => {
if (navigator.share) {
navigator.share({
title: item.title || '',
text: '',
url
}).then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error))
} else {
copy(url)
}
}}
>
copy link
</Dropdown.Item>
)
}