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

Refactor GameGrid

Browse source
This commit is contained in:
Mosh Hamedani 2023-03-07 06:54:59 -08:00
parent 2edb200e44
commit 87371fa8a8
1 changed files with 19 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/GameGrid.tsx
View file

@ -6,35 +6,34 @@ import GameCard from "./GameCard";
import GameCardContainer from "./GameCardContainer";
import GameCardSkeleton from "./GameCardSkeleton";
interface Props {
gameQuery: GameQuery
interface Props {
gameQuery: GameQuery;
}
const GameGrid = ({ gameQuery }: Props) => {
const { data, error, isLoading } = useGames(gameQuery);
const skeletons = [1, 2, 3, 4, 5, 6];
if (error) return <Text>{error}</Text>;
return (
<>
{error && <Text>{error}</Text>}
<SimpleGrid
columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}
padding="10px"
spacing={6}
>
{isLoading &&
skeletons.map((skeleton) => (
<GameCardContainer key={skeleton}>
<GameCardSkeleton />
</GameCardContainer>
))}
{data.map((game) => (
<GameCardContainer key={game.id}>
<GameCard game={game} />
<SimpleGrid
columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}
padding="10px"
spacing={6}
>
{isLoading &&
skeletons.map((skeleton) => (
<GameCardContainer key={skeleton}>
<GameCardSkeleton />
</GameCardContainer>
))}
</SimpleGrid>
</>
{data.map((game) => (
<GameCardContainer key={game.id}>
<GameCard game={game} />
</GameCardContainer>
))}
</SimpleGrid>
);
};