06. Game Card

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
└── 📁src
    └── App.css
    └── App.tsx
    └── 📁assets
        └── logo.webp
        └── react.svg
    └── 📁components
        └── ColorModeSwitch.tsx
        └── GameCard.tsx
        └── GameGrid.tsx
        └── NavBar.tsx
    └── 📁hooks
        └── useGames.ts
    └── index.css
    └── main.tsx
    └── 📁services
        └── api-client.ts
    └── theme.ts
    └── vite-env.d.ts
useGames
1
2
3
4
5
6
7
8
9
......

export interface Game {
  id: number;
  name: string;
  background_image: string;
}

......
GameCard.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { Card, Image, CardBody, Heading } from "@chakra-ui/react";
import { Game } from "../hooks/useGames";

interface Props {
  game: Game;
}

const GameCard = ({ game }: Props) => {
  return (
    <Card borderRadius="10px" overflow="hidden">
      <Image src={game.background_image} />
      <CardBody>
        <Heading fontSize="2xl">{game.name}</Heading>
      </CardBody>
    </Card>
  );
};

export default GameCard;
GameGrid.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Text, SimpleGrid } from "@chakra-ui/react";
import useGames from "../hooks/useGames";
import GameCard from "./GameCard";

const GameGrid = () => {
  const { games, error } = useGames();

  return (
    <>
      {error && <Text>{error}</Text>}
      <SimpleGrid
        columns={{ sm: 1, md: 2, lg: 3, xl: 5 }}
        padding="10px"
        spacing={10}
      >
        {games.map((game) => (
          <GameCard key={game.id} game={game} />
        ))}
      </SimpleGrid>
    </>
  );
};

export default GameGrid;

评论