Sort Function Implemented.

components/Sort.tsx

 import { Box, Card, CardContent, FormControl, FormHelperText, MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { getGame, getGames } from "@/lib/igdb";
+import { IGame } from "@/types/types";
+import Image from "next/image";
 
-// this is a single sorting helper-component, only for design purposes
 export default function Sort() {
-    const [select, setSelct] = useState('');
+    const [select, setSelect] = useState('');
+    const [games, setGames] = useState<IGame[]>([]);
+
+    useEffect(() => {
+        async function fetchGames() {
+            //spiele werden über getGames geholt und in den state gesetzt
+            const fetchedGames = await getGames();
+            setGames(fetchedGames);
+        }
+        fetchGames();
+    }, []);
 
     const handleChange = (event: SelectChangeEvent) => {
-        setSelct(event.target.value);
+        setSelect(event.target.value);
+    };
+
+    const sortGames = () => {
+        if (select === "name") {
+            // Sortiert die Spiele nach namen (aufsteigend)
+            return games.sort((a, b) => a.name.localeCompare(b.name));
+        }
+        
+        // returned unsortierte games
+        return games;
     };
 
+    const sortedGames = sortGames();
+
     return (
         <Box sx={{ position: 'sticky', top: 0 }}>
-            <Card variant="outlined" >
+            <Card variant="outlined">
                 <CardContent>
                     <Typography>Filter</Typography>
 
                     <FormControl fullWidth>
-                        <FormHelperText>Sorty By</FormHelperText>
+                        <FormHelperText>Sort By</FormHelperText>
                         <Select
                             value={select}
                             onChange={handleChange}
@@ -26,12 +50,17 @@ export default function Sort() {
                             <MenuItem value="">
                                 <em>Any</em>
                             </MenuItem>
-                            <MenuItem value={1}>Rating</MenuItem>
-                            <MenuItem value={2}>Release Date</MenuItem>
+                            <MenuItem value="name">Name</MenuItem>
+                            
                         </Select>
                     </FormControl>
                 </CardContent>
             </Card>
+
+            {/* Zeigt sortierte liste */}
+            {sortedGames.map(game => (
+                <div key={game.id}>{game.name}</div>
+            ))}
         </Box>
     )
 }
\ No newline at end of file