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

56
src/components/GenreList.tsx
View file

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