Search angepasst.

components/Search.tsx

+"use client"
+
 import ArrowCircleRightRoundedIcon from '@mui/icons-material/ArrowCircleRightRounded';
 import SearchIcon from '@mui/icons-material/Search';
 import { Container, IconButton, InputAdornment, TextField } from '@mui/material';
+import { useState } from 'react';
+import { getGames } from '@/lib/igdb';
+import { IGame } from '@/types/types';
+import Game from './Game';
+
+export default function Search() {
+    const [searchText, setSearchText] = useState('');
+    const [searchResults, setSearchResults] = useState<IGame[]>([]);
 
-export default function SearchInput() {
-    const handleSearch = (event: { target: { value: any; }; }) => {
+    const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
         const searchText = event.target.value;
-        console.log('Search:', searchText);
+        setSearchText(searchText);
+    };
+
+    const handleSearchSubmit = async () => {
+        // Suche der Games durch eigene Sucheingaben.
+        const games = await getGames(); // Funktion um die Games aus Datenbank zu getten
+        //Es wird geschaut ob gamename(mit to lower Case), dem suchtext (searchText mit to lower case) entspricht.
+        const filteredGames = games.filter(game => game.name.toLowerCase().includes(searchText.toLowerCase()));
+        setSearchResults(filteredGames);
     };
 
     return (
@@ -14,6 +31,7 @@ export default function SearchInput() {
                 placeholder="Search"
                 variant="outlined"
                 size="small"
+                value={searchText}
                 onChange={handleSearch}
                 InputProps={{
                     startAdornment: (
@@ -23,7 +41,8 @@ export default function SearchInput() {
                     ),
                     endAdornment: (
                         <InputAdornment position="end">
-                            <IconButton edge="end" aria-label="start search">
+                            {/* Gesucht wird erst wenn auf Suche geklickt wird. */}
+                            <IconButton edge="end" aria-label="start search" onClick={handleSearchSubmit}>
                                 <ArrowCircleRightRoundedIcon />
                             </IconButton>
                         </InputAdornment>
@@ -33,6 +52,11 @@ export default function SearchInput() {
                     },
                 }}
             />
+
+            {/* Anzeigen der Suchergebnisse */}
+            {searchResults.map(game => (
+                <Game key={game.id} id={game.id} name={game.name} cover={game.cover} />
+            ))}
         </Container>
     );
-};
+}
\ No newline at end of file