Style | Card styling and fav button

full-stack-javascript/21-inventory-application/client/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

full-stack-javascript/21-inventory-application/client/package.json

@@ -29,6 +29,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.3",
     "vite": "^5.2.0"
   }

full-stack-javascript/21-inventory-application/client/src/components/PokeCard.jsx

@@ -1,16 +1,43 @@
 import capitalise from "../utils/capitalise";
+import { HeartIcon as HeartIconOutline } from "@heroicons/react/24/outline";
+import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
 
 function PokeCard({ pokemon }) {
-  // console.log(pokemon);
+  function handleClick(e) {
+    console.log(e);
+  }
 
   return (
-    <div className="p-4 flex flex-col items-center border-solid border-2 border-gray-900 rounded-md">
-      <img className="max-w-24	" src={pokemon.sprites.front_default}></img>
-      <p>{capitalise(pokemon.name)}</p>
-      <div>
-        {pokemon.types.map((typeObj) => {
-          return <span key={typeObj.type.name}>{typeObj.type.name}</span>;
-        })}
+    <div className="flex flex-col items-center rounded-md bg-gray-500/20 p-4">
+      <div className="absolute self-end">
+        <button
+          type="button"
+          className="relative rounded-full p-1 text-gray-500 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-white dark:focus:ring-white dark:focus:ring-offset-gray-800"
+          onClick={() => {
+            handleClick(pokemon.id);
+          }}
+        >
+          <span className="sr-only">Favorite Pokemon</span>
+          <HeartIconOutline className="h-6 w-6" aria-hidden="true" />
+        </button>
+      </div>
+      <img className="mt-6 max-w-24" src={pokemon.sprites.front_default}></img>
+      <div className="flex flex-col items-center gap-2 p-2">
+        <p className="text-xl font-bold text-gray-300">
+          {capitalise(pokemon.name)}
+        </p>
+        <div className="flex gap-2">
+          {pokemon.types.map((typeObj) => {
+            return (
+              <span
+                key={typeObj.type.name}
+                className="min-w-12 rounded-xl bg-white px-2 py-1 text-center text-xs font-semibold"
+              >
+                {capitalise(typeObj.type.name)}
+              </span>
+            );
+          })}
+        </div>
       </div>
     </div>
   );

full-stack-javascript/21-inventory-application/client/src/components/PokeList.jsx

@@ -33,7 +33,7 @@ function PokeList() {
             } catch (error) {
               console.log({ ...item, error });
             }
-          })
+          }),
         );
 
         nextList.data = [...currData, ...expandList];
@@ -56,22 +56,18 @@ function PokeList() {
     fetchList([]);
   }
 
-  // if (state === "loading") {
-  //   return <p>loading...</p>;
-  // }
-
   return (
-    <div className="p-2 sm:p-6 lg:p-8 flex flex-col items-center gap-8 dark:bg-gray-800">
+    <div className="flex flex-col items-center gap-8 p-4 pb-12 sm:p-6 lg:p-8 dark:bg-gray-800">
       {state === "loading" && !list && <p>Loading...</p>}
       {list && (
         <>
-          <div className="w-full max-w-7xl grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
+          <div className="grid w-full max-w-7xl grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-6">
             {list.data.map((item) => {
               return <PokeCard pokemon={item} key={item.id}></PokeCard>;
             })}
           </div>
           <button
-            className="px-3 py-2 w-fit min-w-32 rounded-md bg-gray-200 text-gray-900 hover:bg-gray-300 dark:hover:bg-gray-100 text-sm font-medium"
+            className="w-fit min-w-32 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-300 dark:hover:bg-gray-100"
             disabled={state === "loading"}
             onClick={() => {
               console.log(list.next);