Continue building out Pokemon cards with types.

apollo-graphql/queries/pokemons.ts

@@ -17,6 +17,7 @@ export const POKEMONS_QUERY = gql`
       pokemon_v2_pokemontypes {
         pokemon_v2_type {
           name
+          id
         }
       }
       pokemon_v2_pokemonsprites {

components/Card/index.tsx

@@ -2,9 +2,11 @@ import React, { FC } from "react"
 import Image from "next/image"
 import { pokenmonTypes } from "@/types/pokemons"
 import { typeColours } from "@/data/type-colours"
+import { hectogramsToPounds } from "@/utilities/data-conversion"
 
 export interface CardProps {
   name: string
+  id: number
   image: string
   hp: number
   height: number
@@ -14,6 +16,7 @@ export interface CardProps {
 
 export const Card: FC<CardProps> = ({
   name,
+  id,
   image,
   hp,
   height,
@@ -29,32 +32,58 @@ export const Card: FC<CardProps> = ({
     return typeColours[backgroundColour]
   }
 
-  getBackgroundColours()
   return (
-    <div className="p-2" style={{ backgroundColor: getBackgroundColours() }}>
+    <div
+      className="p-2 border-8 border-black/15"
+      style={{ backgroundColor: getBackgroundColours() }}
+    >
       <div className="flex justify-end font-semibold">
         <h2 className="block mr-auto text-lg">{name}</h2>
         <div className="text-lg">
           <span className="text-xs">HP</span>
           {hp}
         </div>
+        <div className="overflow-hidden">
+          <Image
+            className=""
+            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/brilliant-diamond-and-shining-pearl/${type[0].pokemon_v2_type.id}.png`}
+            alt={"type icon"}
+            width="152"
+            height="36"
+          />
+        </div>
+      </div>
+
+      <div className="border-slate-400 border-4 bg-black/15">
+        <Image
+          src={image}
+          alt={name}
+          width="150"
+          height="150"
+          className="m-auto"
+        />
       </div>
 
-      <Image
-        src={image}
-        alt={name}
-        width="150"
-        height="150"
-        className="m-auto"
-      />
+      <ul className="flex bg-slate-200 justify-center gap-2">
+        <li>NO. {id}</li>
+        <li>HT: {height}</li>
+        <li>WT: {hectogramsToPounds(weight).toFixed(1)} lbs</li>
+      </ul>
+
       <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>
+              <li>
+                <Image
+                  className=""
+                  src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-vii/lets-go-pikachu-lets-go-eevee/${foo.pokemon_v2_type.id}.png`}
+                  alt={"type icon"}
+                  width="152"
+                  height="36"
+                />
+              </li>
             ))}
           </ul>
         </li>

types/pokemons.ts

@@ -25,6 +25,7 @@ export interface pokemonStat {
 export interface pokenmonTypes {
   pokemon_v2_type: {
     name: string
+    id: number
   }
 }
 

utilities/data-conversion.ts

@@ -0,0 +1,3 @@
+export const hectogramsToPounds = (hectograms: number): number => {
+  return hectograms / 4.5359237
+}