45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
|
|
export default function ToApp() {
|
|
const [showButton, setShowButton] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if (window.scrollY < 2) {
|
|
setShowButton(true);
|
|
} else {
|
|
setShowButton(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className="fixed z-10 top-4 right-6 md:top-12 md:right-12 text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
|
|
onClick={() => window.location.href = "/"}
|
|
>
|
|
🎸
|
|
</button>
|
|
|
|
{showButton && (
|
|
<div className="fixed z-20 top-8 right-6 md:top-16 md:right-12 text-white bg-gradient-to-br w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-2xl">
|
|
<span className="absolute bottom-0 -right-2 bg-white text-black rounded-full p-1 pr-2 pl-2 text-xs">Try it!</span>
|
|
<button
|
|
type="button"
|
|
className="z-30 w-16 h-16 rounded-full"
|
|
onClick={() => window.location.href = "/"}
|
|
>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
|
|
</>
|
|
);
|
|
};
|