nicolabs/mosh-game-hub
1
0
Fork 0
mirror of https://github.com/mosh-hamedani/game-hub.git synced 2026-05-21 12:14:32 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add a dynamic page heading

Browse source
This commit is contained in:
Mosh Hamedani 2023-03-03 11:31:33 -08:00
parent f002e86214
commit c5dc8367f6
2 changed files with 26 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.tsx
View file

@ -1,6 +1,7 @@
import { Box, Flex, Grid, GridItem, HStack, Show } from "@chakra-ui/react"; import { Box, Flex, Grid, GridItem, HStack, Show } from "@chakra-ui/react";
import { useState } from "react"; import { useState } from "react";
import GameGrid from "./components/GameGrid"; import GameGrid from "./components/GameGrid";
import GameHeading from "./components/GameHeading";
import GenreList from "./components/GenreList"; import GenreList from "./components/GenreList";
import NavBar from "./components/NavBar"; import NavBar from "./components/NavBar";
import PlatformSelector from "./components/PlatformSelector"; import PlatformSelector from "./components/PlatformSelector";
@ -39,12 +40,15 @@ function App() {
</GridItem> </GridItem>
</Show> </Show>
<GridItem area="main"> <GridItem area="main">
<Flex paddingLeft={2} marginBottom={5}> <Box paddingLeft={2}>
<Box marginRight={5}> <GameHeading gameQuery={gameQuery} />
<PlatformSelector selectedPlatform={gameQuery.platform} onSelectPlatform={(platform) => setGameQuery({ ...gameQuery, platform}) } /> <Flex marginBottom={5}>
</Box> <Box marginRight={5}>
<SortSelector sortOrder={gameQuery.sortOrder} onSelectSortOrder={(sortOrder) => setGameQuery({ ...gameQuery, sortOrder })} /> <PlatformSelector selectedPlatform={gameQuery.platform} onSelectPlatform={(platform) => setGameQuery({ ...gameQuery, platform}) } />
</Flex> </Box>
<SortSelector sortOrder={gameQuery.sortOrder} onSelectSortOrder={(sortOrder) => setGameQuery({ ...gameQuery, sortOrder })} />
</Flex>
</Box>
<GameGrid gameQuery={gameQuery} /> <GameGrid gameQuery={gameQuery} />
</GridItem> </GridItem>
</Grid> </Grid>

16
src/components/GameHeading.tsx Normal file
View file

@ -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