Feature/sok

frontend/src/App.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { GameList } from './components/GameList/GameList';
 import { mockGames } from './mocks/games';
+import { SearchBar } from './components/SearchBar/SearchBar';
+import { useDebounce } from './hooks/useDebounce';
 
 /**
  * Midlertidig forside: viser spillene med mockdata til GraphQL er klart.
@@ -10,6 +12,16 @@ function App() {
   const [favorites, setFavorites] = useState<Set<string>>(new Set());
   const [view, setView] = useState<'list' | 'grid'>('list');
 
+  // Det brukeren skriver nå, og det vi faktisk søker på etter 300 ms pause
+  const [input, setInput] = useState('');
+  const query = useDebounce(input.trim(), 300);
+
+  // MIDLERTIDIG: filtrerer mockdata på klienten for å kunne teste søket.
+  // Når GraphQL er klart, sendes `query` til backend og filtreres i databasen.
+  const games = mockGames.filter((g) =>
+    g.name.toLowerCase().includes(query.toLowerCase()),
+  );
+
   const toggleFavorite = (id: string) => {
     setFavorites((prev) => {
       const next = new Set(prev);
@@ -22,6 +34,7 @@ function App() {
   return (
     <main style={{ padding: '0 24px' }}>
       <h1>Spill</h1>
+      <SearchBar value={input} onChange={setInput} />
       <h2>Søkeresultater</h2>
 
       {/* Bytter mellom visning 1 (liste) og visning 2 (rutenett) */}
@@ -35,7 +48,7 @@ function App() {
       </div>
 
       <GameList
-        games={mockGames}
+        games={games}
         view={view}
         favorites={favorites}
         onToggleFavorite={toggleFavorite}

frontend/src/components/SearchBar/SearchBar.css

@@ -0,0 +1,22 @@
+/* Skjuler labelen visuelt, men beholder den for skjermlesere. */
+.search-bar__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.search-bar__input {
+  width: 100%;
+  padding: 0.6rem 0.8rem;
+  font: inherit;
+  border: 1px solid #767676; 
+  border-radius: 0; 
+  -webkit-appearance: textfield;
+  appearance: textfield;
+}

frontend/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,30 @@
+import './SearchBar.css';
+
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+// Søkefeltet øverst på siden. Komponenten eier ikke state selv:
+// forelderen styrer verdien og bestemmer når det faktisk søkes (debounce).
+export function SearchBar({ value, onChange }: SearchBarProps) {
+  return (
+    // role="search" gjør at skjermlesere kan hoppe rett til søket.
+    // preventDefault hindrer at Enter laster siden på nytt.
+    <form className="search-bar" role="search" onSubmit={(e) => e.preventDefault()}>
+      {/* Skjult visuelt, men lest opp av skjermlesere. Placeholder alene er ikke nok. */}
+      <label htmlFor="game-search" className="search-bar__label">
+        Søk etter spill
+      </label>
+      <input
+        id="game-search"
+        className="search-bar__input"
+        type="search"
+        placeholder="Søk etter spill …"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        autoComplete="off"
+      />
+    </form>
+  );
+}

frontend/src/hooks/useDebounce.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay = 300): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debounced;
+}