mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 15:09:22 +00:00
38 lines
1.5 KiB
JavaScript
38 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import Image from 'next/image'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faQrcode } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
/**
|
|
* 赞赏按钮
|
|
* @returns {JSX.Element}
|
|
* @constructor
|
|
*/
|
|
const RewardButton = () => {
|
|
const openPopover = () => {
|
|
if (window) {
|
|
document.getElementById('reward-qrcode').classList.remove('hidden')
|
|
}
|
|
}
|
|
const closePopover = () => {
|
|
if (window) {
|
|
document.getElementById('reward-qrcode').classList.add('hidden')
|
|
}
|
|
}
|
|
return (
|
|
<div className='justify-center'>
|
|
<div onMouseEnter={openPopover} onMouseLeave={closePopover}
|
|
className='bg-pink-500 py-2 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 rounded cursor-pointer'>
|
|
<FontAwesomeIcon icon={faQrcode} className='mr-2' />
|
|
<span>打赏一杯咖啡</span>
|
|
</div>
|
|
|
|
<div onMouseEnter={openPopover} onMouseLeave={closePopover} id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
|
|
<div className='w-80'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_alipay.png' /></div>
|
|
<div className='w-80'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_wechat.png' /></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default RewardButton
|