33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import Image from "next/image";
|
|
import Shrimp from "./shrimp.png";
|
|
|
|
export function ShrimpRain({ randomValues }: { randomValues: number[] }) {
|
|
const maxWidthToShrimp = randomValues.length;
|
|
|
|
const shrimpImagesArray = Array.from(Array(maxWidthToShrimp).keys());
|
|
const shrimpImagesArrayElements = shrimpImagesArray.map((index) => {
|
|
const left = "left-[" + (index + 1) + "%]";
|
|
const bottom = "bottom-[" + randomValues[index] + "%]";
|
|
return (
|
|
<Image
|
|
key={index}
|
|
className="w-[15%] h-auto absolute animate-shrimply-rain"
|
|
src={Shrimp}
|
|
alt="3D modeled shrimp"
|
|
width={774}
|
|
height={605}
|
|
style={{
|
|
left: +index + 1 + "%",
|
|
bottom: randomValues[index] + "%",
|
|
}}
|
|
/>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="fixed w-full h-full overflow-hidden">
|
|
{shrimpImagesArrayElements}
|
|
</div>
|
|
);
|
|
}
|