40 lines
945 B
TypeScript
40 lines
945 B
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import ReactConfetti from "react-confetti";
|
|
import { useWindowSize } from "react-use";
|
|
import { useMediaQuery } from "usehooks-ts";
|
|
|
|
const Confetti = () => {
|
|
const [recycle, setRecycle] = useState<boolean>(true);
|
|
const { width, height } = useWindowSize();
|
|
const colors = [
|
|
"linear-gradient(45deg, #5D5D72, #8589DE)",
|
|
"linear-gradient(45deg, #E1E0FF, #575992)",
|
|
"#8589DE",
|
|
"#575992",
|
|
"#E1E0FF",
|
|
"#FF3131",
|
|
];
|
|
|
|
const mobile = useMediaQuery("(max-width: 426px)");
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => setRecycle(false), 30000);
|
|
}, [recycle]);
|
|
|
|
return (
|
|
<div className="fixed top-0 left-0 z-50">
|
|
<ReactConfetti
|
|
width={width}
|
|
height={height}
|
|
recycle={recycle}
|
|
numberOfPieces={mobile ? 300 / 3 : 300}
|
|
tweenDuration={500}
|
|
colors={colors}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Confetti;
|