diff --git a/src/App.tsx b/src/App.tsx index 95a7847..376c8fb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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() { - setGameQuery({ ...gameQuery, platform}) } /> + + setGameQuery({ ...gameQuery, platform}) } /> + + diff --git a/src/components/SortSelector.tsx b/src/components/SortSelector.tsx new file mode 100644 index 0000000..0849953 --- /dev/null +++ b/src/components/SortSelector.tsx @@ -0,0 +1,22 @@ +import { Button, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react'; +import { BsChevronDown } from 'react-icons/bs'; + +const SortSelector = () => { + return ( + + }> + Order by: Relevance + + + Relevance + Date added + Name + Release date + Popularity + Average rating + + + ); +} + +export default SortSelector \ No newline at end of file