d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-06 23:16:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
引入react-fontawesome，升级至v5.15;
next/link补齐passHref;
替换img为next/Image,优化图片
This commit is contained in:
tangly1024
2021-12-03 15:01:11 +08:00
parent 88d1e0742a
commit 49ab1eb124
32 changed files with 243 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/ShareBar.js
View File

@@ -5,6 +5,16 @@ import { createPopper } from '@popperjs/core'
import copy from 'copy-to-clipboard'
import QRCode from 'qrcode.react'
import { useGlobal } from '@/lib/global'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
faFacebookSquare,
faQq,
faTelegram,
faTwitterSquare,
faWeibo,
faWeixin
} from '@fortawesome/free-brands-svg-icons'
import { faLink, faStar } from '@fortawesome/free-solid-svg-icons'
const ShareBar = ({ post }) => {
const router = useRouter()
@@ -36,52 +46,52 @@ const ShareBar = ({ post }) => {
className='py-2 text-gray-500 text-center space-x-2 flex inline-block my-1 dark:text-gray-200 overflow-visible'>
<div className='hidden md:block text-gray-800 dark:text-gray-300 mr-2 my-2'>{locale.COMMON.SHARE}:</div>
<div className='text-3xl cursor-pointer'>
<a className='fa fa-facebook-square hover:text-red-600'
href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} />
<a className='hover:text-blue-700' href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} >
<FontAwesomeIcon icon={faFacebookSquare}/>
</a>
</div>
<div className='text-3xl cursor-pointer'>
<a className='fa fa-twitter-square hover:text-red-600' target='_blank' rel='noreferrer'
href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} />
<a className='hover:text-blue-400' target='_blank' rel='noreferrer' href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} >
<FontAwesomeIcon icon={faTwitterSquare}/>
</a>
</div>
<div className='text-3xl cursor-pointer'>
<a className='fa fa-telegram hover:text-red-600' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} />
<a className='hover:text-blue-500' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} >
<FontAwesomeIcon icon={faTelegram}/>
</a>
</div>
<div className='cursor-pointer text-2xl'>
<a className='fa fa-wechat hover:text-red-600' ref={btnRef}
onMouseEnter={() => {
openPopover()
}}
onMouseLeave={() => {
closePopover()
}}>
<div ref={popoverRef}
className={(qrCodeShow ? 'animate__animated animate__fadeIn ' : 'hidden') + ' text-center py-2'}>
<a className='hover:text-green-600' ref={btnRef} onMouseEnter={openPopover} onMouseLeave={closePopover}>
<FontAwesomeIcon icon={faWeixin}/>
<div ref={popoverRef} className={(qrCodeShow ? 'animate__animated animate__fadeIn ' : 'hidden') + ' text-center py-2'}>
<div className='p-2 bg-white border-0 duration-200 transform block z-50 font-normal shadow-xl mr-10'>
<QRCode
value={shareUrl}// 生成二维码的内容
fgColor='#000000' // 二维码的颜色
/>
<QRCode value={shareUrl} fgColor='#000000' />
</div>
<span className='bg-white text-black font-semibold p-1 mb-0 rounded-t-lg text-sm mx-auto mr-10'>
{locale.COMMON.SCAN_QR_CODE}
</span>
</span>
</div>
</a>
</div>
<div className='cursor-pointer text-2xl'>
<a className='fa fa-weibo hover:text-red-600' target='_blank' rel='noreferrer'
href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} />
<a className='hover:text-red-600' target='_blank' rel='noreferrer'href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} >
<FontAwesomeIcon icon={faWeibo}/>
</a>
</div>
<div className='cursor-pointer text-2xl'>
<a className='fa fa-qq hover:text-red-600' target='_blank' rel='noreferrer'
href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} />
<a className='hover:text-blue-400' target='_blank' rel='noreferrer'href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} >
<FontAwesomeIcon icon={faQq}/>
</a>
</div>
<div className='cursor-pointer text-2xl'>
<a className='fa fa-star hover:text-red-600' target='_blank' rel='noreferrer'
href={`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&sharesource=qzone&title=${post.title}&summary=${post.summary}`} />
<a className='hover:text-red-600' target='_blank' rel='noreferrer' href={`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&sharesource=qzone&title=${post.title}&summary=${post.summary}`} >
<FontAwesomeIcon icon={faStar}/>
</a>
</div>
<div className='cursor-pointer text-2xl'>
<a className='fa fa-link hover:text-red-600' onClick={copyUrl} />
<a className='hover:text-red-600' onClick={copyUrl} >
<FontAwesomeIcon icon={faLink}/>
</a>
</div>
</div>
</>