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 ( - - {isLoading || error - ? skeletons.map((skeleton) => ) - : data.map((genre) => ( - - - - onSelectGenre(genre)} fontSize="lg" fontWeight={genre.id === selectedGenre?.id ? "bold":"normal"} cursor="pointer">{genre.name} - - - ))} - + <> + Genres + + {isLoading || error + ? skeletons.map((skeleton) => ) + : data.map((genre) => ( + + + + onSelectGenre(genre)} fontSize="lg" fontWeight={genre.id === selectedGenre?.id ? "bold":"normal"} cursor="pointer">{genre.name} + + + ))} + + ); };