add project

src/lib/components/GameGrid.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Game } from '$lib/types';
+	import GameCard from './GameCard.svelte';
+
+	let {
+		games,
+		loggedIn,
+		filter = ''
+	}: { games: Game[]; loggedIn: boolean; filter?: string } = $props();
+
+	const filtered = $derived(
+		filter.trim()
+			? games.filter(
+					(g) =>
+						g.title.toLowerCase().includes(filter.toLowerCase()) ||
+						g.genre.toLowerCase().includes(filter.toLowerCase())
+				)
+			: games
+	);
+</script>
+
+{#if filtered.length === 0}
+	<p class="text-gray-500 text-center py-16">No games found.</p>
+{:else}
+	<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+		{#each filtered as game (game.id)}
+			<GameCard {game} {loggedIn} />
+		{/each}
+	</div>
+{/if}