good startHEADmain

1 files changed, 50 insertions, 0 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..8477c7c
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getTrending, type VideoInfo } from '$lib/api/youtube';
+  import VideoCard from '$lib/components/VideoCard.svelte';
+
+  let videos = $state<VideoInfo[]>([]);
+  let loading = $state(true);
+  let error = $state('');
+
+  onMount(async () => {
+    try {
+      videos = await getTrending();
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Failed to load videos';
+    } finally {
+      loading = false;
+    }
+  });
+</script>
+
+<svelte:head>
+  <title>ActualYT - Home</title>
+</svelte:head>
+
+<div class="container">
+  <h1 class="section-title">Trending</h1>
+
+  {#if loading}
+    <div class="loading">Loading videos</div>
+  {:else if error}
+    <div class="error">{error}</div>
+  {:else if videos.length === 0}
+    <div class="empty">No videos found</div>
+  {:else}
+    <div class="video-grid">
+      {#each videos as video (video.videoId)}
+        <VideoCard
+          videoId={video.videoId}
+          title={video.title}
+          author={video.author}
+          authorId={video.authorId}
+          thumbnails={video.videoThumbnails}
+          viewCount={video.viewCount}
+          publishedText={video.publishedText}
+          lengthSeconds={video.lengthSeconds}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>