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