File size: 1,623 Bytes
d16e0f2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { useEffect, useState } from 'react';
const emojis = ['😄', '🚀', '👀', '👨💻', '👩💻', '🎉', '🔥', '🎊', '🙌', '👏', '🎁', '🤩', '🥳', '🔗', '🌟', '🌈', '🌞', '🌝', '🌚', '👋', '🍕', '🍔', '🍟', '🍳', '🍲', '🍱', '🍣', '🍤', '🍦', '🍩', '🍪', '🎂', '🍰', '🍫', '🍬', '🍭', '🍿', '🍷', '🍸', '🍹', '🍺', '🍻', '🍽', '🥢', '🧂', '⚽️', '🏀', '🏈', '⚾️', '🎾', '🏐', '🏉', '🎱', '🏓', '🏸', '🏒', '🏑', '🥍', '🏏', '🥅', '⛳️', '🏹', '🎣', '🥊', '🥋', '🎽', '🛹', '🛷', '🥌', '🎿', '⛷', '🏂', '🏋️♀️', '🤼♀️', '🤸♀️', '⛹️♀️', '🤺', '🤾♀️', '🏌️♀️', '🏇', '🧘♀️', '🏄♀️', '🏊♀️', '🤽♀️', '🚣♀️', '🧗♀️', '🚵♀️', '🚴♀️', '🏆', '💻']
export default function BackgroundEmojiGrid() {
const [grid, setGrid] = useState([]);
useEffect(() => {
const newGrid = Array.from({ length: 1000 }, () => emojis[Math.floor(Math.random() * emojis.length)]); // Adjust the length to suit the size of your grid
setGrid(newGrid);
}, []);
return (
<div className="fixed top-1/2 left-1/2 w-[200vh] h-[200vh] overflow-hidden -z-10 transform -translate-x-1/2 -translate-y-1/2 rotate-45 opacity-10">
{grid.map((emoji, i) => (
<span key={i} className="inline-block w-24 h-24 md:w-32 md:h-32 text-4xl">{emoji}</span> // Adjust the width and height to suit the size of your grid cells
))}
</div>
);
}
|