erik/octto-engenharia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: corrigir WhatsApp button com URL api.whatsapp.com e remover glitch do hover

Browse Source
This commit is contained in:
Erik
2025-12-03 20:08:10 -03:00
parent 2c76d7af8d
commit 654bdd2521
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/WhatsAppButton.tsx
View File

@@ -6,7 +6,7 @@ import { useState, useEffect } from 'react';
export default function WhatsAppButton() {
const { t } = useLanguage();
const [whatsappLink, setWhatsappLink] = useState('https://wa.me/5513998030036');
const [whatsappLink, setWhatsappLink] = useState('https://api.whatsapp.com/send/?phone=5513998030036&text&type=phone_number&app_absent=0');
const [mounted, setMounted] = useState(false);
useEffect(() => {
@@ -18,7 +18,7 @@ export default function WhatsAppButton() {
.then(data => {
if (data.whatsapp) {
const cleanNumber = data.whatsapp.replace(/\D/g, '');
setWhatsappLink(`https://wa.me/${cleanNumber}`);
setWhatsappLink(`https://api.whatsapp.com/send/?phone=${cleanNumber}&text&type=phone_number&app_absent=0`);
}
})
.catch(console.error);
@@ -33,13 +33,21 @@ export default function WhatsAppButton() {
href={whatsappLink}
target="_blank"
rel="noopener noreferrer"
className="fixed bottom-6 right-6 z-40 flex flex-row-reverse items-center justify-center bg-[#25D366] text-white w-14 h-14 rounded-full shadow-lg hover:bg-[#20bd5a] transition-all duration-300 group"
className="fixed bottom-6 right-6 z-40 bg-[#25D366] text-white w-14 h-14 rounded-full shadow-lg hover:shadow-xl transition-shadow duration-200 flex items-center justify-center flex-shrink-0"
aria-label={t('whatsapp.label')}
style={{
transition: 'all 0.2s ease-in-out',
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = '#20bd5a';
e.currentTarget.style.transform = 'scale(1.1)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = '#25D366';
e.currentTarget.style.transform = 'scale(1)';
}}
>
<i className="ri-whatsapp-line text-3xl leading-none group-hover:scale-110 transition-transform duration-300"></i>
<span className="font-bold text-sm ml-0 group-hover:ml-2 max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-300 whitespace-nowrap">
{t('whatsapp.label')}
</span>
<i className="ri-whatsapp-line text-3xl leading-none"></i>
</Link>
);
}