clean up genres list

HoussamMrabet · Jun 18, 2023 · 1a6d4d4 · 1a6d4d4
1 parent 7ff766a
commit 1a6d4d4
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/src/components/GenreList.tsx b/src/components/GenreList.tsx
@@ -1,4 +1,4 @@
-import { HStack, Image, List, ListItem, Text } from "@chakra-ui/react";
+import { HStack, Heading, Image, List, ListItem, Text } from "@chakra-ui/react";
 import useGenres, { Genre } from "../hooks/useGenres";
 import getCroppedImageUrl from "../services/image-url";
 import GenreSkeleton from "./GenreSkeleton";
@@ -13,22 +13,26 @@ const GenreList = ({onSelectGenre, selectedGenre}: Props) => {
  const skeletons = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
  return (
- <List paddingY="10px">
- {isLoading || error
- ? skeletons.map((skeleton) => <GenreSkeleton key={skeleton} />)
- : data.map((genre) => (
- <ListItem key={genre.id} paddingY="5px">
- <HStack>
- <Image
- boxSize="32px"
- borderRadius={8}
- src={getCroppedImageUrl(genre.image_background)}
- />
- <Text onClick={()=>onSelectGenre(genre)} fontSize="lg" fontWeight={genre.id === selectedGenre?.id ? "bold":"normal"} cursor="pointer">{genre.name}</Text>
- </HStack>
- </ListItem>
- ))}
- </List>
+ <>
+ <Heading fontSize="2xl" marginY={3}>Genres</Heading>
+ <List paddingY="10px">
+ {isLoading || error
+ ? skeletons.map((skeleton) => <GenreSkeleton key={skeleton} />)
+ : data.map((genre) => (
+ <ListItem key={genre.id} paddingY="5px">
+ <HStack>
+ <Image
+ boxSize="32px"
+ borderRadius={8}
+ objectFit="cover"
+ src={getCroppedImageUrl(genre.image_background)}
+ />
+ <Text onClick={()=>onSelectGenre(genre)} fontSize="lg" fontWeight={genre.id === selectedGenre?.id ? "bold":"normal"} cursor="pointer">{genre.name}</Text>
+ </HStack>
+ </ListItem>
+ ))}
+ </List>
+ </>
  );
 };