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

Clean up the genres

Browse source
This commit is contained in:
Mosh Hamedani 2023-03-06 08:03:11 -08:00
parent c5dc8367f6
commit 72600a45a6
1 changed files with 39 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/GenreList.tsx
View file

@ -1,4 +1,13 @@
import { Button, HStack, Image, List, ListItem, Spinner, Text } from "@chakra-ui/react"; import {
Button,
Heading,
HStack,
Image,
List,
ListItem,
Spinner,
Text,
} from "@chakra-ui/react";
import useGenres, { Genre } from "../hooks/useGenres"; import useGenres, { Genre } from "../hooks/useGenres";
import getCroppedImageUrl from "../services/image-url"; import getCroppedImageUrl from "../services/image-url";
@ -15,20 +24,33 @@ const GenreList = ({ selectedGenre, onSelectGenre }: Props) => {
if (isLoading) return <Spinner />; if (isLoading) return <Spinner />;
return ( return (
<>
<Heading fontSize='2xl' marginBottom={3}>Genres</Heading>
<List> <List>
{data.map((genre) => ( {data.map((genre) => (
<ListItem key={genre.id} paddingY='5px'> <ListItem key={genre.id} paddingY="5px">
<HStack> <HStack>
<Image <Image
boxSize="32px" boxSize="32px"
borderRadius={8} borderRadius={8}
objectFit="cover"
src={getCroppedImageUrl(genre.image_background)} src={getCroppedImageUrl(genre.image_background)}
/> />
<Button fontWeight={genre.id === selectedGenre?.id ? 'bold' : 'normal'} onClick={() => onSelectGenre(genre)} fontSize='lg' variant='link'>{genre.name}</Button> <Button
whiteSpace="normal"
textAlign="left"
fontWeight={genre.id === selectedGenre?.id ? "bold" : "normal"}
onClick={() => onSelectGenre(genre)}
fontSize="lg"
variant="link"
>
{genre.name}
</Button>
</HStack> </HStack>
</ListItem> </ListItem>
))} ))}
</List> </List>
</>
); );
}; };