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

Highlight the selected genre

Browse source
This commit is contained in:
Mosh Hamedani 2023-03-02 09:34:31 -08:00
parent 2b26f7d1f4
commit 7df3a833d9
2 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.tsx
View file

@ -24,7 +24,7 @@ function App() {
</GridItem>
<Show above="lg">
<GridItem area="aside" paddingX={5}>
<GenreList onSelectGenre={(genre) => setSelectedGenre(genre)} />
<GenreList selectedGenre={selectedGenre} onSelectGenre={(genre) => setSelectedGenre(genre)} />
</GridItem>
</Show>
<GridItem area="main">

5
src/components/GenreList.tsx
View file

@ -4,9 +4,10 @@ import getCroppedImageUrl from "../services/image-url";
interface Props {
onSelectGenre: (genre: Genre) => void;
selectedGenre: Genre | null;
}
const GenreList = ({ onSelectGenre }: Props) => {
const GenreList = ({ selectedGenre, onSelectGenre }: Props) => {
const { data, isLoading, error } = useGenres();
if (error) return null;
@ -23,7 +24,7 @@ const GenreList = ({ onSelectGenre }: Props) => {
borderRadius={8}
src={getCroppedImageUrl(genre.image_background)}
/>
<Button onClick={() => onSelectGenre(genre)} fontSize='lg' variant='link'>{genre.name}</Button>
<Button fontWeight={genre.id === selectedGenre?.id ? 'bold' : 'normal'} onClick={() => onSelectGenre(genre)} fontSize='lg' variant='link'>{genre.name}</Button>
</HStack>
</ListItem>
))}