add heading

src/App.tsx

@@ -7,6 +7,7 @@ import { Genre } from "./hooks/useGenres";
 import PlatformSelector from "./components/PlatformSelector";
 import { Platform } from "./hooks/usePlatforms";
 import SortSelector from "./components/SortSelector";
+import GameHeading from "./components/GameHeading";
 
 export interface GameQuery {
  genre: Genre | null;
@@ -41,6 +42,7 @@ function App() {
  </GridItem>
  </Show>
  <GridItem area="main" paddingX="10px">
+ <GameHeading gameQuery={gameQuery} />
  <HStack>
  <PlatformSelector
  onSelectPlatform={(platform) => setGameQuery({...gameQuery, platform})}

src/components/GameHeading.tsx

@@ -0,0 +1,15 @@
+import { Heading } from '@chakra-ui/react'
+import { GameQuery } from '../App'
+
+interface Props {
+ gameQuery: GameQuery
+}
+
+const GameHeading = ({gameQuery}: Props) => {
+ const heading = `${gameQuery.platform?.name || ''} ${gameQuery.genre?.name || ''} Games`;
+ return (
+ <Heading as="h1" fontSize="5xl">{heading}</Heading>
+ )
+}
+
+export default GameHeading