57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
interface ShareButtonsProps {
|
|
displayName: string
|
|
}
|
|
|
|
export function ShareButtons({ displayName }: ShareButtonsProps) {
|
|
const t = useTranslations('project')
|
|
|
|
const handleShare = () => {
|
|
const url = encodeURIComponent(window.location.href)
|
|
const text = encodeURIComponent(t('shareTweetText', { name: displayName }))
|
|
window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank')
|
|
}
|
|
|
|
const handleCopyLink = () => {
|
|
navigator.clipboard.writeText(window.location.href)
|
|
}
|
|
|
|
return (
|
|
<div className="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center gap-6">
|
|
<div className="flex gap-4">
|
|
<button
|
|
className="p-2 border border-black dark:border-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
title={t('shareOnX')}
|
|
onClick={handleShare}
|
|
id="share-button"
|
|
name="share"
|
|
>
|
|
<span className="material-icons text-lg">share</span>
|
|
</button>
|
|
<button
|
|
className="p-2 border border-black dark:border-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
title={t('copyLink')}
|
|
onClick={handleCopyLink}
|
|
id="copy-link-button"
|
|
name="copyLink"
|
|
>
|
|
<span className="material-icons text-lg">link</span>
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-display font-bold text-gray-500">{t('feedbackQuestion')}</span>
|
|
<button
|
|
className="px-4 py-2 bg-primary text-black font-display font-bold text-xs uppercase border border-black hover:bg-yellow-400 transition-colors shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px]"
|
|
id="feedback-button"
|
|
name="feedback"
|
|
>
|
|
{t('feedbackYes')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|