60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
|
|
export function FloatingDonateButton() {
|
|
const [shake, setShake] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Primeira animação após 5 segundos
|
|
const initialTimer = setTimeout(() => {
|
|
setShake(true);
|
|
setTimeout(() => setShake(false), 1000);
|
|
}, 5000);
|
|
|
|
// Animação repetida a cada 30 segundos
|
|
const interval = setInterval(() => {
|
|
setShake(true);
|
|
setTimeout(() => setShake(false), 1000);
|
|
}, 30000);
|
|
|
|
return () => {
|
|
clearTimeout(initialTimer);
|
|
clearInterval(interval);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<motion.div
|
|
className="fixed bottom-6 right-6 z-50"
|
|
animate={
|
|
shake
|
|
? {
|
|
rotate: [0, -5, 5, -5, 5, 0],
|
|
scale: [1, 1.05, 1, 1.05, 1],
|
|
}
|
|
: {}
|
|
}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<a
|
|
href="https://www.buymeacoffee.com/evandrotruuta"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block hover:scale-110 transition-transform duration-200 shadow-2xl rounded-lg"
|
|
>
|
|
<Image
|
|
src="https://img.buymeacoffee.com/button-api/?text=Doe/Donate&emoji=🥑&slug=evandrotruuta&button_colour=71aefe&font_colour=000000&font_family=Poppins&outline_colour=000000&coffee_colour=FFDD00"
|
|
alt="Buy Me a Coffee"
|
|
width={200}
|
|
height={56}
|
|
className="h-12 md:h-14 w-auto"
|
|
unoptimized
|
|
/>
|
|
</a>
|
|
</motion.div>
|
|
);
|
|
}
|