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

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