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

Build sort selector

Browse source
This commit is contained in:
Mosh Hamedani 2023-03-03 07:54:48 -08:00
parent 08cbda491b
commit d62ca49e21
2 changed files with 28 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/App.tsx
View file

@ -1,9 +1,10 @@
import { Grid, GridItem, Show } from "@chakra-ui/react";
import { Grid, GridItem, HStack, Show } from "@chakra-ui/react";
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 SortSelector from "./components/SortSelector";
import { Platform } from "./hooks/useGames";
import { Genre } from "./hooks/useGenres";
@ -36,7 +37,10 @@ function App() {
</GridItem>
</Show>
<GridItem area="main">
<HStack spacing={5} paddingLeft={2} marginBottom={5}>
<PlatformSelector selectedPlatform={gameQuery.platform} onSelectPlatform={(platform) => setGameQuery({ ...gameQuery, platform}) } />
<SortSelector />
</HStack>
<GameGrid gameQuery={gameQuery} />
</GridItem>
</Grid>

22
src/components/SortSelector.tsx Normal file
View file

@ -0,0 +1,22 @@
import { Button, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
import { BsChevronDown } from 'react-icons/bs';
const SortSelector = () => {
return (
<Menu>
<MenuButton as={Button} rightIcon={<BsChevronDown />}>
Order by: Relevance
</MenuButton>
<MenuList>
<MenuItem>Relevance</MenuItem>
<MenuItem>Date added</MenuItem>
<MenuItem>Name</MenuItem>
<MenuItem>Release date</MenuItem>
<MenuItem>Popularity</MenuItem>
<MenuItem>Average rating</MenuItem>
</MenuList>
</Menu>
);
}
export default SortSelector