function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [filteredGames, setFilteredGames] = React.useState([]); const [selectedGame, setSelectedGame] = React.useState(null); const games = [ { title: "Cyber Guardians", description: "Shield the digital realm", cover: "/cyber-guardians.jpg", details: "Defend the cybernetic world from rogue AI threats in this immersive techno-thriller.", gallery: [] }, { title: "Starship Nova", description: "Command your fleet among the stars", cover: "/starship-nova.jpg", details: "Strategize and engage in deep space battles as you navigate the cosmos in search of glory.", gallery: [] }, { title: "Lost Artifacts", description: "Recover relics of past civilizations", cover: "/lost-artifacts.jpg", details: "Join an archaeological adventure uncovering secrets hidden in the sands of time.", gallery: [] }, { title: "Mask of Eternity", description: "Forge your legacy", cover: "/mask-of-eternity.jpg", details: "Embark on an epic quest to secure the Mask of Eternity and cement your place in history.", gallery: [] }, { title: "Apex Predators", description: "Hunt or be hunted", cover: "/apex-predators.jpg", details: "Survive the wilderness in this heart-pounding game of survival and strategy.", gallery: [] }, { title: "Thunder Racers", description: "Gear up for electrifying races", cover: "/thunder-racers.jpg", details: "Rev your engines and unleash the speed demon within in this high-octane racing challenge.", gallery: [] }, { title: "Realms of Valor", description: "Conquer and rule", cover: "/realms-of-valor.jpg", details: "Enter a land of war and valor, where your strategy determines your destiny.", gallery: [] }, { title: "Haunted Hollows", description: "Venture into the unknown", cover: "/haunted-hollows.jpg", details: "Face your fears as you explore haunted locales in search of the truth.", gallery: [] }, { title: "Crimson Tides", description: "Navigate treacherous waters", cover: "/crimson-tides.jpg", details: "Set sail on the high seas and carve your name into nautical legend.", gallery: [] }, { title: "Mechanical Revolution", description: "Rise against the machines", cover: "/mechanical-revolution.jpg", details: "Join the resistance in a dystopian future where machines dominate the world.", gallery: [] }, { title: "Shadow of the Serpent", description: "Unravel the serpent's riddle", cover: "/shadow-of-the-serpent.jpg", details: "Embark on a journey filled with ancient mythologies and face the legendary serpent.", gallery: [] }, { title: "Chemical Warfare", description: "Master the elements", cover: "/chemical-warfare.jpg", details: "Engage in a tactical battle where chemistry is your weapon.", gallery: [] }, { title: "Galactic Empires", description: "Forge alliances among the stars", cover: "/galactic-empires.jpg", details: "Build and expand your empire across galaxies, making allies and enemies alike.", gallery: [] }, { title: "Quantum Breakpoint", description: "Warp the fabric of reality", cover: "/quantum-breakpoint.jpg", details: "Manipulate the laws of physics to overcome impossible odds and fix a fractured universe.", gallery: [] }, { title: "Labyrinth Legends", description: "Decipher the labyrinth's codes", cover: "/labyrinth-legends.jpg", details: "Navigate through intricate labyrinths filled with riddles and mythical creatures.", gallery: [] }, { title: "Infernal Ascension", description: "Brave the fires of the abyss", cover: "/infernal-ascension.jpg", details: "Descend into the depths and conquer the fiery challenges that await.", gallery: [] }, { title: "Sky Pilots", description: "Soar above the clouds", cover: "/sky-pilots.jpg", details: "Take on the skies as you pilot through breathtaking landscapes and treacherous weather.", gallery: [] }, { title: "Viking Valor", description: "Live and die by the sword", cover: "/viking-valor.jpg", details: "Embrace the Viking spirit as you raid for treasure and glory, forging your saga across the lands.", gallery: [] } ]; React.useEffect(()=>{ setFilteredGames(games.filter((game)=>game.title.toLowerCase().includes(searchTerm.toLowerCase()))); }, [ searchTerm ]); const handleSearchChange = (event)=>{ setSearchTerm(event.target.value); }; const selectGame = (game)=>{ setSelectedGame(game); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#171a21] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/game-directory-logo.png", alt: "Game directory logo", className: "h-8 object-contain", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "flex bg-[#0e1116] rounded p-1", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", name: "search", placeholder: "search", className: "text-white bg-[#0e1116] pl-2 outline-none w-full", value: searchTerm, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-1 text-white bg-[#1b2838]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] p-8 font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl text-[#FFFFFF] mb-8", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Game Directory"), selectedGame ? /*#__PURE__*/ React.createElement("div", { className: "bg-[#1b2838] p-4 rounded space-y-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl text-[#FFFFFF] mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, selectedGame.title), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#C6C6C6] mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, selectedGame.description), /*#__PURE__*/ React.createElement("img", { src: selectedGame.cover, alt: `Cover of the game ${selectedGame.title}`, className: "w-full h-[200px] object-cover mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#FFFFFF]", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, selectedGame.details), /*#__PURE__*/ React.createElement("p", { className: "text-[#777] text-sm mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel magna consequat, volutpat erat id, scelerisque dolor. Ut auctor sit amet sem non interdum. In vel consequat nunc, nec interdum purus. Aenean consequat mollis augue, pulvinar porta magna bibendum eget. Proin quis enim feugiat, tempus lorem vitae, semper nibh. Nullam ac lorem odio. Sed cursus arcu sit amet nunc sodales, nec ultricies ipsum hendrerit. Etiam at tempor ante."), /*#__PURE__*/ React.createElement("p", { className: "text-[#777] text-sm mt-2", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Fusce tincidunt odio at nibh lacinia rutrum. Phasellus ullamcorper magna sed ante convallis, in tincidunt nunc dignissim. Nunc ut hendrerit nisi, id gravida velit. Proin vitae augue non turpis mattis egestas in sed dui. Phasellus semper odio porta, dapibus justo vitae, pulvinar sem. Nulla facilisi."), /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#1b2838] px-4 py-2 rounded", onClick: ()=>setSelectedGame(null), __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Back to directory")) : /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto space-y-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, filteredGames.map((game, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center space-x-4 bg-[#1b2838] p-4 rounded cursor-pointer", onClick: ()=>selectGame(game), __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: game.cover, alt: `${game.title} cover`, className: "h-[140px] w-[100px] object-cover", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-semibold text-[#FFFFFF]", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, game.title), /*#__PURE__*/ React.createElement("span", { className: "text-md text-[#C6C6C6]", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, game.description))))))); }