feat(examples/tuono-tutorial): rewrite tuono-tutorial (#449)

examples/tuono-tutorial/src/components/PokemonLink.tsx

@@ -1,28 +1,24 @@
+// src/components/PokemonLink.tsx
 import type { JSX } from 'react'
 import { Link } from 'tuono'
 
 import styles from './PokemonLink.module.css'
 
-interface Pokemon {
+interface PokemonLinkProps {
+  id: number
   name: string
 }
 
 export default function PokemonLink({
-  pokemon,
   id,
-}: {
-  pokemon: Pokemon
-  id: number
-}): JSX.Element {
+  name,
+}: PokemonLinkProps): JSX.Element {
   return (
-    <Link
-      className={styles.link}
-      href={`/pokemons/${pokemon.name}`}
-      id={pokemon.name}
-    >
-      {pokemon.name}
+    <Link href={`/pokemons/${name}`} className={styles.link} id={id.toString()}>
+      {name}
       <img
         src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
+        alt=""
       />
     </Link>
   )

examples/tuono-tutorial/src/components/PokemonView.module.css

@@ -1,17 +1,3 @@
-.back-btn {
-  background-color: white;
-  border-radius: 10px;
-  padding: 7px 15px;
-  color: black;
-  text-decoration: none;
-  border: solid #f0f0f0 1px;
-  font-size: 20px;
-}
-
-.back-btn:hover {
-  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-}
-
 .pokemon {
   display: flex;
   justify-content: space-between;

examples/tuono-tutorial/src/components/PokemonView.tsx

@@ -1,42 +1,39 @@
-import { Link } from 'tuono'
+// src/components/PokemonView.tsx
+import type { JSX } from 'react'
 
 import styles from './PokemonView.module.css'
 
 interface Pokemon {
+  id: number
   name: string
-  id: string
   weight: number
   height: number
 }
 
+interface PokemonViewProps {
+  pokemon: Pokemon
+}
+
 export default function PokemonView({
   pokemon,
-}: {
-  pokemon?: Pokemon
-}): JSX.Element {
+}: PokemonViewProps): JSX.Element {
   return (
-    <div>
-      <Link className={styles['back-btn']} href="/">
-        Back
-      </Link>
-      {pokemon?.name && (
-        <div className={styles.pokemon}>
-          <div>
-            <h1 className={styles.name}>{pokemon.name}</h1>
-            <dl className={styles.spec}>
-              <dt className={styles.label}>Weight:</dt>
-              <dd>{pokemon.weight}lbs</dd>
-            </dl>
-            <dl className={styles.spec}>
-              <dt className={styles.label}>Height:</dt>
-              <dd>{pokemon.height}ft</dd>
-            </dl>
-          </div>
-          <img
-            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
-          />
-        </div>
-      )}
+    <div className={styles.pokemon}>
+      <div>
+        <h1 className={styles.name}>{pokemon.name}</h1>
+        <dl className={styles.spec}>
+          <dt className={styles.label}>Weight: </dt>
+          <dd>{pokemon.weight}lbs</dd>
+        </dl>
+        <dl className={styles.spec}>
+          <dt className={styles.label}>Height: </dt>
+          <dd>{pokemon.height}ft</dd>
+        </dl>
+      </div>
+      <img
+        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
+        alt=""
+      />
     </div>
   )
 }