1 files changed, 77 insertions, 0 deletions
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
new file mode 100644
index 0000000..29bf7dc
--- /dev/null
+++ b/src/routes/search/+page.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { search, type VideoInfo } from '$lib/api/youtube';
+  import VideoCard from '$lib/components/VideoCard.svelte';
+
+  let results = $state<VideoInfo[]>([]);
+  let loading = $state(true);
+  let error = $state('');
+  let currentQuery = $state('');
+
+  $effect(() => {
+    const query = $page.url.searchParams.get('q') || '';
+    if (query !== currentQuery) {
+      currentQuery = query;
+      loadResults(query);
+    }
+  });
+
+  async function loadResults(query: string) {
+    if (!query) {
+      results = [];
+      loading = false;
+      return;
+    }
+
+    loading = true;
+    error = '';
+
+    try {
+      results = await search(query);
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Search failed';
+      results = [];
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>{currentQuery ? `${currentQuery} - Search` : 'Search'} - ActualYT</title>
+</svelte:head>
+
+<div class="container">
+  {#if currentQuery}
+    <h1 class="section-title">Results for "{currentQuery}"</h1>
+  {:else}
+    <h1 class="section-title">Search</h1>
+  {/if}
+
+  {#if loading}
+    <div class="loading">Searching</div>
+  {:else if error}
+    <div class="error">{error}</div>
+  {:else if !currentQuery}
+    <div class="empty">Enter a search term to find videos</div>
+  {:else if results.length === 0}
+    <div class="empty">No results found for "{currentQuery}"</div>
+  {:else}
+    <div class="video-grid">
+      {#each results as result (result.videoId)}
+        {#if result.videoId && result.title}
+          <VideoCard
+            videoId={result.videoId}
+            title={result.title}
+            author={result.author || ''}
+            authorId={result.authorId || ''}
+            thumbnails={result.videoThumbnails || []}
+            viewCount={result.viewCount || 0}
+            publishedText={result.publishedText || ''}
+            lengthSeconds={result.lengthSeconds || 0}
+          />
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>