From c5dc8367f6ba34229cf21a2912f33603a9ebd706 Mon Sep 17 00:00:00 2001
From: Mosh Hamedani <programmingwithmosh@gmail.com>
Date: Fri, 3 Mar 2023 11:31:33 -0800
Subject: [PATCH] Add a dynamic page heading

---
 src/App.tsx                    | 16 ++++++++++------
 src/components/GameHeading.tsx | 16 ++++++++++++++++
 2 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 src/components/GameHeading.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f0c00f6..7e7f765 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { Box, Flex, Grid, GridItem, HStack, Show } from "@chakra-ui/react";
 import { useState } from "react";
 import GameGrid from "./components/GameGrid";
+import GameHeading from "./components/GameHeading";
 import GenreList from "./components/GenreList";
 import NavBar from "./components/NavBar";
 import PlatformSelector from "./components/PlatformSelector";
@@ -39,12 +40,15 @@ function App() {
         </GridItem>
       </Show>
       <GridItem area="main">
-        <Flex paddingLeft={2} marginBottom={5}>
-          <Box marginRight={5}>
-            <PlatformSelector selectedPlatform={gameQuery.platform} onSelectPlatform={(platform) => setGameQuery({ ...gameQuery, platform}) } />
-          </Box>
-          <SortSelector sortOrder={gameQuery.sortOrder} onSelectSortOrder={(sortOrder) => setGameQuery({ ...gameQuery, sortOrder })} />
-        </Flex>
+        <Box paddingLeft={2}>
+          <GameHeading gameQuery={gameQuery} />
+          <Flex marginBottom={5}>
+            <Box marginRight={5}>
+              <PlatformSelector selectedPlatform={gameQuery.platform} onSelectPlatform={(platform) => setGameQuery({ ...gameQuery, platform}) } />
+            </Box>
+            <SortSelector sortOrder={gameQuery.sortOrder} onSelectSortOrder={(sortOrder) => setGameQuery({ ...gameQuery, sortOrder })} />
+          </Flex>
+        </Box>
         <GameGrid gameQuery={gameQuery} />
       </GridItem>
     </Grid>
diff --git a/src/components/GameHeading.tsx b/src/components/GameHeading.tsx
new file mode 100644
index 0000000..92b8d5a
--- /dev/null
+++ b/src/components/GameHeading.tsx
@@ -0,0 +1,16 @@
+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' marginY={5} fontSize='5xl'>{heading}</Heading>
+  )
+}
+
+export default GameHeading
\ No newline at end of file