| 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> | |
| ); | |
| } | |