Start building Pokemon cards using data from GraphQL Pokemon API.

components/Card/index.tsx

@@ -0,0 +1,44 @@
+import React, { FC } from "react"
+import Image from "next/image"
+import { pokenmonTypes } from "@/types/pokemons"
+
+export interface CardProps {
+  name: string
+  image: string
+  hp: number
+  height: number
+  weight: number
+  type: pokenmonTypes[]
+}
+
+export const Card: FC<CardProps> = ({
+  name,
+  image,
+  hp,
+  height,
+  weight,
+  type,
+}) => {
+  return (
+    <div className="border-2">
+      <div className="flex justify-end">
+        <h2 className="block mr-auto">{name}</h2>
+        <span>HP{hp}</span>
+      </div>
+
+      <Image src={image} alt={name} width="150" height="150" />
+      <ul>
+        <li>Height: {height}</li>
+        <li>Weight: {weight}</li>
+        <li>
+          Type:
+          <ul>
+            {type.map((foo) => (
+              <li key={foo.pokemon_v2_type.name}>{foo.pokemon_v2_type.name}</li>
+            ))}
+          </ul>
+        </li>
+      </ul>
+    </div>
+  )
+}

css/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

next.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "raw.githubusercontent.com",
+        port: "",
+        pathname: "/PokeAPI/sprites/master/sprites/pokemon/**",
+        search: "",
+      },
+    ],
+  },
+}

pages/_app.tsx

@@ -0,0 +1,19 @@
+import type { ReactElement, ReactNode } from "react"
+import type { NextPage } from "next"
+import type { AppProps } from "next/app"
+import "../css/styles.css"
+
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode
+}
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout
+}
+
+export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout ?? ((page) => page)
+
+  return getLayout(<Component {...pageProps} />)
+}

pages/index.tsx

@@ -0,0 +1,49 @@
+import { POKEMONS_QUERY } from "@/apollo-graphql/queries/pokemons"
+import { Card } from "@/components/Card/index"
+import { pokemonsData, PokemonsProps } from "@/types/pokemons"
+import client from "../apollo-graphql/apollo-client"
+
+export default function Home({ pokemonsData }: PokemonsProps) {
+  return (
+    <main className="bg-slate-100">
+      <div className="w-full max-w-[1200px] m-auto">
+        <h1>Pokemon Guess Who</h1>
+        <section className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
+          {pokemonsData.map((item: pokemonsData) => (
+            <Card
+              key={item.name}
+              name={item.name}
+              image={
+                item.pokemon_v2_pokemonsprites[0].sprites.other[
+                  `official-artwork`
+                ].front_default
+              }
+              hp={item.pokemon_v2_pokemonstats[0].base_stat}
+              height={item.height}
+              weight={item.weight}
+              type={item.pokemon_v2_pokemontypes}
+            />
+          ))}
+        </section>
+      </div>
+    </main>
+  )
+}
+
+export async function getStaticProps() {
+  let pokemonsData = {}
+
+  await client
+    .query({
+      query: POKEMONS_QUERY,
+    })
+    .then((res) => {
+      pokemonsData = res.data.pokemon_v2_pokemon
+    })
+
+  return {
+    props: {
+      pokemonsData,
+    },
+  }
+}

tailwind.config.ts

@@ -1,10 +1,9 @@
-import type { Config } from "tailwindcss";
+import type { Config } from "tailwindcss"
 
 const config: Config = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
@@ -15,5 +14,5 @@ const config: Config = {
     },
   },
   plugins: [],
-};
-export default config;
+}
+export default config

tsconfig.json

@@ -7,7 +7,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",