Merge pull request #6 from dca/feat/use-image-instead-of-img

feat: Use Image instead of img
dca · Aug 12, 2023 · da702e8 · da702e8
2 parents 5e695f8 + a536689
commit da702e8
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 42 deletions.
diff --git a/pokedex-for-kids-web/next.config.js b/pokedex-for-kids-web/next.config.js
@@ -2,6 +2,7 @@
 const nextConfig = {
     output: 'export',
     basePath: '/pokedex-for-kids',
+    images: { unoptimized: true }
 }
 
 module.exports = nextConfig

diff --git a/pokedex-for-kids-web/package.json b/pokedex-for-kids-web/package.json
@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest",
+    "test": "jest --watch",
     "test:ci": "jest --ci --coverage"
   },
   "dependencies": {

diff --git a/pokedex-for-kids-web/src/app/pokedex-kids/page.tsx b/pokedex-for-kids-web/src/app/pokedex-kids/page.tsx
@@ -1,46 +1,8 @@
 'use client';
 import React, { useRef } from 'react';
+import Image from 'next/image'
 import pokedex from '@/app/data/base-pokedex.json';
-
-const styles: { [key: string]: React.CSSProperties } = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    fontFamily: "'Arial', sans-serif",
-    backgroundColor: '#f4f4f4',
-    minHeight: '100vh',
-    padding: '20px 0'
-  },
-  pokemonRow: {
-    display: 'flex',
-    alignItems: 'center',
-    margin: '20px 0',
-    padding: '20px',
-    border: '1px solid #ddd',
-    boxShadow: '0px 4px 15px rgba(0, 0, 0, 0.1)',
-    borderRadius: '15px',
-    backgroundColor: '#ffffff',
-    cursor: 'pointer',
-    transition: 'transform 0.2s'
-  },
-  pokemonName: {
-    flex: 1, // Take up remaining space
-    fontSize: '18px',
-    marginRight: '20px'
-  },
-  pokemonImage: {
-    width: '100px',
-    borderRadius: '10px',
-    border: '2px solid #e0e0e0',
-    marginRight: '20px'
-  },
-  title: {
-    fontSize: '32px',
-    margin: '20px 0',
-    color: '#333'
-  }
-};
+import { styles } from './styles';
 
 interface PokemonRowProps {
   pokemon: {
@@ -59,10 +21,18 @@ const PokemonRow = ({ pokemon, audioRef, handlePlayAudio }: PokemonRowProps) =>
       onClick={() => handlePlayAudio(`${pokemon['index']}-${pokemon['name-en']}`)}
       onTouchStart={() => handlePlayAudio(`${pokemon['index']}-${pokemon['name-en']}`)}
     >
-      <img 
+      {/* <img 
         style={styles.pokemonImage}
         src={`https://assets.pokemon.com/assets/cms2/img/pokedex/full/${(pokemon['index'].replace('#0', '#').replace('#', ''))}.png`} 
         alt={pokemon['name-en']} 
+      /> */}
+      <Image 
+        style={styles.pokemonImage}
+        width={100}
+        height={100}
+        loading="lazy"
+        src={`https://assets.pokemon.com/assets/cms2/img/pokedex/full/${(pokemon['index'].replace('#0', '#').replace('#', ''))}.png`}
+        alt={pokemon['name-en']}
       />
       <h2 style={styles.pokemonName}>
         {pokemon['index']} - {pokemon['name-tw']} - {pokemon['name-en']}

diff --git a/pokedex-for-kids-web/src/app/pokedex-kids/styles.tsx b/pokedex-for-kids-web/src/app/pokedex-kids/styles.tsx
@@ -0,0 +1,42 @@
+'use client';
+import React from 'react';
+
+export const styles: { [key: string]: React.CSSProperties; } = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    fontFamily: "'Arial', sans-serif",
+    backgroundColor: '#f4f4f4',
+    minHeight: '100vh',
+    padding: '20px 0'
+  },
+  pokemonRow: {
+    display: 'flex',
+    alignItems: 'center',
+    margin: '20px 0',
+    padding: '20px',
+    border: '1px solid #ddd',
+    boxShadow: '0px 4px 15px rgba(0, 0, 0, 0.1)',
+    borderRadius: '15px',
+    backgroundColor: '#ffffff',
+    cursor: 'pointer',
+    transition: 'transform 0.2s'
+  },
+  pokemonName: {
+    flex: 1,
+    fontSize: '18px',
+    marginRight: '20px'
+  },
+  pokemonImage: {
+    // width: '100px',
+    borderRadius: '10px',
+    border: '2px solid #e0e0e0',
+    marginRight: '20px'
+  },
+  title: {
+    fontSize: '32px',
+    margin: '20px 0',
+    color: '#333'
+  }
+};