45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { useState } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { ShrimpRain } from "./shrimp-rain";
|
|
|
|
export default function SeafoodButton() {
|
|
const [showShrimpOverlay, setShowShrimpOverlay] = useState(false);
|
|
|
|
// set maxShrimp based on image size so not to overflow
|
|
const maxShrimp = 83;
|
|
const [shrimpRainValues] = useState(() => {
|
|
const shrimpRainValuesArr: number[] = [];
|
|
for (let i = 0; i < maxShrimp; i++) {
|
|
shrimpRainValuesArr.push(Math.floor(Math.random() * 200));
|
|
}
|
|
return shrimpRainValuesArr;
|
|
});
|
|
|
|
function itsRainingShrimp() {
|
|
setShowShrimpOverlay(true);
|
|
// wait until after the animation plays to make the shrimp disappear 🪄
|
|
setTimeout(() => {
|
|
setShowShrimpOverlay(false);
|
|
}, 2900);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
className="cursor-[unset] bg-space-shrimp-blue text-tangerine-dream-shrimp p-[20px] mt-[10px] w-full rounded-xl border-transparent border-2 hover:border-ashy-shrimp shadow-lg/40"
|
|
type="button"
|
|
onClick={() => itsRainingShrimp()}
|
|
>
|
|
Dive into Seafood Delights
|
|
</button>
|
|
{showShrimpOverlay &&
|
|
createPortal(
|
|
<ShrimpRain randomValues={shrimpRainValues} />,
|
|
document.body
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
//todo nice to have: cooler button hover state - dancing shrimps
|