26 featdisplay mockmon stats

project2/src/App.tsx

@@ -1,4 +1,5 @@
-import type { Pokemon, Ability, Type } from '../types/pokemon';
+import type { Pokemon, Ability, Type } from './types/pokemon';
+import { useState } from 'react';
 
 // Mocking a base Abilty.
 const mockAbility: Ability = {
@@ -158,6 +159,17 @@ const mockeMons: Pokemon[] = [
 ];
 
 function App() {
+
+    const [searchTerm, setSearchTerm] = useState('');
+    const [selectedPokemon, setSelectedPokemon] = useState<Pokemon | null>(null);
+    const filteredPokemon = mockeMons.filter((pokemon) =>   /*true betyr behold og false betyr fjern*/
+        pokemon.name.toLocaleLowerCase().includes(searchTerm.trim().toLocaleLowerCase())); 
+        /*trim fjerner whitespace i starten og slutten av stringen PEDER du kan si ifra om du mener dette kan gjøres lettere*/ 
+
+    const handlePokemonClick = (pokemon: Pokemon) => {
+        setSelectedPokemon(pokemon);
+    };
+
     return (
         <>
             <header>
@@ -166,20 +178,38 @@ function App() {
                     type="search"
                     placeholder="Search"
                     aria-label="Search pokemon"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
                 ></input>
             </header>
-            <main>
+            <main>   
+                {selectedPokemon ? (
+                    <div>
+                        <h2>{selectedPokemon.name}</h2>
+                        <p>#{String(selectedPokemon.id).padStart(4, '0')}</p>
+                        <p>Attack: {selectedPokemon.attack}</p>
+                        <p>Defence: {selectedPokemon.defence}</p>
+                        <p>Special Attack: {selectedPokemon.special_attack}</p>
+                        <p>Special Defence: {selectedPokemon.special_defence}</p>
+                        <p>Speed: {selectedPokemon.speed}</p>
+                        <p>HP: {selectedPokemon.hp}</p>
+                        <button type="button" onClick={() => setSelectedPokemon(null)}>Back</button>
+                    </div>
+                ) : (
                 <ul className="pokemon-grid">
-                    {mockeMons.map((pokemon) => (
+                    {filteredPokemon.map((pokemon) => (
                         <li key={pokemon.id} className="pokemon-card">
+                            <button type="button" onClick={() => handlePokemonClick(pokemon)} className="pokemon-card button">
                             <div className="pokemon-image">
                                 <img src={`Mock_img/${String(pokemon.id).padStart(3, '0')}.png`} alt={pokemon.name} />
                             </div>
                             <h2>{pokemon.name}</h2>
                             <span>#{String(pokemon.id).padStart(4, '0')}</span>
+                            </button>
                         </li>
                     ))}
                 </ul>
+                )}
             </main>
             <footer>
                 <span>Doxing all your favourite pokemon since 2026</span>

project2/src/index.css

@@ -104,6 +104,15 @@ input:hover {
     border: 1px solid var(--card-border);
     border-radius: 1.5rem;
 }
+.pokemon-card button {
+    padding: 0;
+    width: 100%;
+    background: none;
+    border: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+}
 
 .pokemon-image {
     width: 100%;