added favorites to playing-cards

README.md

@@ -30,9 +30,9 @@ sudo rsync -av --delete dist/ /var/www/html/project1/
 echo "Deploy ferdig!"
 ```
 
-
 ## Prettier use
+
 ```
 npm install
-npm run format 
-```
+npm run format
+```

src/App.css

@@ -319,3 +319,31 @@
     padding-bottom: 4px;
   }
 }
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  z-index: 100;
+}
+
+.modal-content {
+  background: #fff;
+  border-radius: 12px;
+  padding: 2rem;
+  position: relative;
+  max-width: 320px;
+  text-align: center;
+}
+
+.modal-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  border: none;
+  background: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+}

src/App.tsx

@@ -5,6 +5,8 @@ import { listAllPokemon } from './Api';
 import { useFavorites } from './useFavorites';
 import FavoritesSidebar from './FavoritesSidebar';
 import './App.css';
+import type { Pokemon } from './Api';
+import PokemonModal from './PokemonModal';
 
 const SEARCH_STORAGE_KEY = 'pokemon-search';
 
@@ -14,7 +16,7 @@ function capitalize(text: string): string {
 
 function App() {
   const [query, setQuery] = useState(
-    () => sessionStorage.getItem(SEARCH_STORAGE_KEY) ?? '',
+    () => sessionStorage.getItem(SEARCH_STORAGE_KEY) ?? ''
   );
 
   // TanStack Query håndterer henting og caching av Pokémon-lista.
@@ -29,19 +31,19 @@ function App() {
   });
 
   const [submittedQuery, setSubmittedQuery] = useState(
-    () => sessionStorage.getItem(SEARCH_STORAGE_KEY) ?? '',
+    () => sessionStorage.getItem(SEARCH_STORAGE_KEY) ?? ''
   );
 
   const [error, setError] = useState('');
 
   const { favorites, isFavorite, toggleFavorite } = useFavorites();
 
+  const [selectedPokemon, setSelectedPokemon] = useState<Pokemon | null>(null);
+
   const pokemon = submittedQuery
     ? allPokemon
-      .filter((entry) =>
-        entry.name.includes(submittedQuery.toLowerCase()),
-      )
-      .slice(0, 24)
+        .filter((entry) => entry.name.includes(submittedQuery.toLowerCase()))
+        .slice(0, 24)
     : [];
 
   function handleSearch(event: FormEvent<HTMLFormElement>) {
@@ -90,27 +92,21 @@ function App() {
             </p>
           )}
 
-          {!isError && error && (
-            <p className="message error">{error}</p>
-          )}
+          {!isError && error && <p className="message error">{error}</p>}
 
-          {!isError && 
-            !error && 
+          {!isError &&
+            !error &&
             !isPending &&
-            submittedQuery && 
+            submittedQuery &&
             pokemon.length === 0 && (
               <p className="message error">
                 Fant ingen Pokémon som matcher «{submittedQuery}».
               </p>
             )}
 
-          {!isError &&
-            !error &&
-            !isPending &&
-            !submittedQuery && (
-              <p className="message">Søkeresultatene dine vises her.</p>
-            )}
-
+          {!isError && !error && !isPending && !submittedQuery && (
+            <p className="message">Søkeresultatene dine vises her.</p>
+          )}
 
           {pokemon.map((entry) => (
             <div className="song" key={entry.id}>
@@ -145,6 +141,14 @@ function App() {
         </section>
       </main>
       <FavoritesSidebar favorites={favorites} onRemove={toggleFavorite} />
+      {selectedPokemon && (
+        <PokemonModal
+          pokemon={selectedPokemon}
+          isFavorite={isFavorite(selectedPokemon.id)}
+          onToggleFavorite={toggleFavorite}
+          onClose={() => setSelectedPokemon(null)}
+          />
+      )}
     </>
   );
 }

src/PokemonModal.tsx

@@ -0,0 +1,38 @@
+import type { Pokemon } from './Api';
+
+function capitalize(text: string): string {
+return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+type PokemonModalProps = {
+pokemon: Pokemon;
+isFavorite: boolean;
+onToggleFavorite: (pokemon: Pokemon) => void;
+onClose: () => void;
+};
+
+function PokemonModal({ pokemon, isFavorite, onToggleFavorite, onClose }: PokemonModalProps) {
+return (
+    <div className="modal-overlay" onClick={onClose}>
+    <div className="modal-content" onClick={(event) => event.stopPropagation()}>
+        <button type="button" className="modal-close" onClick={onClose} aria-label="Lukk">
+        ×
+        </button>
+        <img src={pokemon.imageUrl} alt="" />
+        <h2>{capitalize(pokemon.name)}</h2>
+        <p>#{pokemon.id}</p>
+
+        <button
+        type="button"
+        className={`favorite-toggle${isFavorite ? ' is-favorite' : ''}`}
+        onClick={() => onToggleFavorite(pokemon)}
+        aria-pressed={isFavorite}
+        >
+        ★ {isFavorite ? 'Fjern fra favoritter' : 'Legg til favoritter'}
+        </button>
+    </div>
+    </div>
+);
+}
+
+export default PokemonModal;

src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';
 import App from './App.tsx';