From 1a6d4d4308be0ce88e63b2d5dbdcd1c7cc6b5ed9 Mon Sep 17 00:00:00 2001
From: HoussamMrabet <dodslim100@gmail.com>
Date: Sun, 18 Jun 2023 13:22:00 +0100
Subject: [PATCH] clean up genres list

---
 src/components/GenreList.tsx | 38 ++++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/GenreList.tsx b/src/components/GenreList.tsx
index 050301f..03dbfe5 100644
--- 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>
+    </>
   );
 };