Build platform selector

src/App.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import GameGrid from "./components/GameGrid";
 import GenreList from "./components/GenreList";
 import NavBar from "./components/NavBar";
+import PlatformSelector from "./components/PlatformSelector";
 import { Genre } from "./hooks/useGenres";
 
 function App() {
@@ -28,6 +29,7 @@ function App() {
         </GridItem>
       </Show>
       <GridItem area="main">
+        <PlatformSelector />
         <GameGrid selectedGenre={selectedGenre} />
       </GridItem>
     </Grid>

src/components/PlatformSelector.tsx

@@ -0,0 +1,22 @@
+import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+import { BsChevronDown } from "react-icons/bs";
+import usePlatforms from "../hooks/usePlatforms";
+
+const PlatformSelector = () => {
+  const { data, error } = usePlatforms();
+
+  if (error) return null;
+  
+  return (
+    <Menu>
+      <MenuButton as={Button} rightIcon={<BsChevronDown />}>
+        Platforms
+      </MenuButton>
+      <MenuList>
+        {data.map(platform => <MenuItem key={platform.id}>{platform.name}</MenuItem>)}
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default PlatformSelector;

src/hooks/usePlatforms.ts

@@ -0,0 +1,11 @@
+import useData from "./useData";
+
+interface Platform { 
+  id: number;
+  name: string;
+  slug: string;
+}
+
+const usePlatforms = () => useData<Platform>('/platforms/lists/parents');
+
+export default usePlatforms;