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> </GridItem>
<Show above="lg"> <Show above="lg">
<GridItem area="aside" paddingX={5}> <GridItem area="aside" paddingX={5}>
<GenreList onSelectGenre={(genre) => setSelectedGenre(genre)} /> <GenreList selectedGenre={selectedGenre} onSelectGenre={(genre) => setSelectedGenre(genre)} />
</GridItem> </GridItem>
</Show> </Show>
<GridItem area="main"> <GridItem area="main">

5
src/components/GenreList.tsx
View file

@ -4,9 +4,10 @@ import getCroppedImageUrl from "../services/image-url";
interface Props { interface Props {
onSelectGenre: (genre: Genre) => void; onSelectGenre: (genre: Genre) => void;
selectedGenre: Genre | null;
} }
const GenreList = ({ onSelectGenre }: Props) => { const GenreList = ({ selectedGenre, onSelectGenre }: Props) => {
const { data, isLoading, error } = useGenres(); const { data, isLoading, error } = useGenres();
if (error) return null; if (error) return null;
@ -23,7 +24,7 @@ const GenreList = ({ onSelectGenre }: Props) => {
borderRadius={8} borderRadius={8}
src={getCroppedImageUrl(genre.image_background)} 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> </HStack>
</ListItem> </ListItem>
))} ))}