Skip to content

Commit

Permalink
Merge pull request tangly1024#2844 from tangly1024/release/4.7.5
Browse files Browse the repository at this point in the history 
starter主题的社交按钮配置
  • Loading branch information
@tangly1024
tangly1024 authored Oct 10, 2024
2 parents fc0e98b + dbe9057 commit 42c294c
Showing 1 changed file with 110 additions and 32 deletions.
142 changes: 110 additions & 32 deletions themes/fukasawa/components/SocialButton.js
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,182 @@
import QrCode from '@/components/QrCode'
import { siteConfig } from '@/lib/config'
import { useState } from 'react'

/**
* 社交联系方式按钮组
* @returns {JSX.Element}
* @constructor
*/
const SocialButton = () => {
const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')

const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
const ENABLE_RSS = siteConfig('ENABLE_RSS')
const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')

const CONTACT_XIAOHONGSHU = siteConfig('CONTACT_XIAOHONGSHU')
const CONTACT_ZHISHIXINGQIU = siteConfig('CONTACT_ZHISHIXINGQIU')
const CONTACT_WEHCHAT_PUBLIC = siteConfig('CONTACT_WEHCHAT_PUBLIC')
const [qrCodeShow, setQrCodeShow] = useState(false)

const openPopover = () => {
setQrCodeShow(true)
}
const closePopover = () => {
setQrCodeShow(false)
}

return (
<div className='w-52 flex-wrap flex'>
<div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
{siteConfig('CONTACT_GITHUB') && (
<div className='w-full justify-center flex-wrap flex'>
<div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
{CONTACT_GITHUB && (
<a
target='_blank'
rel='noreferrer'
title={'github'}
href={siteConfig('CONTACT_GITHUB')}>
<i className='fab fa-github transform hover:scale-125 duration-150' />
href={CONTACT_GITHUB}>
<i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{siteConfig('CONTACT_TWITTER') && (
{CONTACT_TWITTER && (
<a
target='_blank'
rel='noreferrer'
title={'twitter'}
href={siteConfig('CONTACT_TWITTER')}>
<i className='fab fa-twitter transform hover:scale-125 duration-150' />
href={CONTACT_TWITTER}>
<i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{siteConfig('CONTACT_TELEGRAM') && (
{CONTACT_TELEGRAM && (
<a
target='_blank'
rel='noreferrer'
href={siteConfig('CONTACT_TELEGRAM')}
href={CONTACT_TELEGRAM}
title={'telegram'}>
<i className='fab fa-telegram transform hover:scale-125 duration-150' />
<i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{siteConfig('CONTACT_LINKEDIN') && (
{CONTACT_LINKEDIN && (
<a
target='_blank'
rel='noreferrer'
href={siteConfig('CONTACT_LINKEDIN')}
title={'linkedIn'}>
<i className='fab fa-linkedin transform hover:scale-125 duration-150' />
href={CONTACT_LINKEDIN}
title={'linkIn'}>
<i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{siteConfig('CONTACT_WEIBO') && (
{CONTACT_WEIBO && (
<a
target='_blank'
rel='noreferrer'
title={'weibo'}
href={siteConfig('CONTACT_WEIBO')}>
<i className='fab fa-weibo transform hover:scale-125 duration-150' />
href={CONTACT_WEIBO}>
<i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{siteConfig('CONTACT_INSTAGRAM') && (
{CONTACT_INSTAGRAM && (
<a
target='_blank'
rel='noreferrer'
title={'instagram'}
href={siteConfig('CONTACT_INSTAGRAM')}>
<i className='fab fa-instagram transform hover:scale-125 duration-150' />
href={CONTACT_INSTAGRAM}>
<i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{siteConfig('CONTACT_EMAIL') && (
{CONTACT_EMAIL && (
<a
target='_blank'
rel='noreferrer'
title={'email'}
href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
<i className='fas fa-envelope transform hover:scale-125 duration-150' />
href={`mailto:${CONTACT_EMAIL}`}>
<i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{JSON.parse(siteConfig('ENABLE_RSS')) && (
{ENABLE_RSS && (
<a
target='_blank'
rel='noreferrer'
title={'RSS'}
href={'/rss/feed.xml'}>
<i className='fas fa-rss transform hover:scale-125 duration-150' />
<i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{siteConfig('CONTACT_BILIBILI') && (
{CONTACT_BILIBILI && (
<a
target='_blank'
rel='noreferrer'
title={'bilibili'}
href={siteConfig('CONTACT_BILIBILI')}>
<i className='fab fa-bilibili transform hover:scale-125 duration-150' />
href={CONTACT_BILIBILI}>
<i className='transform hover:scale-125 duration-150 dark:hover:text-green-400 hover:text-green-600 fab fa-bilibili' />
</a>
)}
{siteConfig('CONTACT_YOUTUBE') && (
{CONTACT_YOUTUBE && (
<a
target='_blank'
rel='noreferrer'
title={'youtube'}
href={siteConfig('CONTACT_YOUTUBE')}>
<i className='fab fa-youtube transform hover:scale-125 duration-150' />
href={CONTACT_YOUTUBE}>
<i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-green-400 hover:text-green-600' />
</a>
)}
{CONTACT_XIAOHONGSHU && (
<a
target='_blank'
rel='noreferrer'
title={'小红书'}
href={CONTACT_XIAOHONGSHU}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
className='transform hover:scale-125 duration-150 w-6'
src='/svg/xiaohongshu.svg'
alt='小红书'
/>
</a>
)}
{CONTACT_ZHISHIXINGQIU && (
<a
target='_blank'
rel='noreferrer'
title={'知识星球'}
className='flex justify-center items-center'
href={CONTACT_ZHISHIXINGQIU}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
className='transform hover:scale-125 duration-150 w-6'
src='/svg/zhishixingqiu.svg'
alt='知识星球'
/>{' '}
</a>
)}
{CONTACT_WEHCHAT_PUBLIC && (
<button
onMouseEnter={openPopover}
onMouseLeave={closePopover}
aria-label={'微信公众号'}>
<div id='wechat-button'>
<i className='transform scale-105 hover:scale-125 duration-150 fab fa-weixin dark:hover:text-green-400 hover:text-green-600' />
</div>
{/* 二维码弹框 */}
<div className='absolute'>
<div
id='pop'
className={
(qrCodeShow ? 'opacity-100 ' : ' invisible opacity-0') +
' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'
}>
<div className='p-2 mt-1 w-28 h-28'>
{qrCodeShow && <QrCode value={CONTACT_WEHCHAT_PUBLIC} />}
</div>
</div>
</div>
</button>
)}
</div>
</div>
)
Expand Down

0 comments on commit 42c294c

Please sign in to comment.