import { useState, useEffect } from "react"; import { useQuery } from "@tanstack/react-query"; import { type Video } from "@shared/schema"; import NetflixGrid from "@/components/netflix-grid"; import { Link } from "wouter"; import { Input } from "@/components/ui/input"; import { Search, Menu, X } from "lucide-react"; interface VideosResponse { videos: Video[]; total: number; hasMore: boolean; } export default function Home() { const [searchQuery, setSearchQuery] = useState(""); const [allVideos, setAllVideos] = useState([]); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // Fetch videos with optimized loading const { data: videosResponse, isLoading, refetch } = useQuery({ queryKey: ["/api/videos", { limit: 150, offset: 0, search: searchQuery || undefined }], queryFn: async ({ queryKey }) => { const [, params] = queryKey as [string, any]; const searchParams = new URLSearchParams(); Object.entries(params).forEach(([key, value]) => { if (value !== undefined) { searchParams.append(key, String(value)); } }); const response = await fetch(`/api/videos?${searchParams}`); if (!response.ok) { throw new Error('Failed to fetch videos'); } return response.json(); }, staleTime: 5 * 60 * 1000, gcTime: 10 * 60 * 1000, refetchOnWindowFocus: false, refetchOnReconnect: false }); // Update videos when new data comes in useEffect(() => { if (videosResponse) { setAllVideos(videosResponse.videos); } }, [videosResponse]); // Only refetch when search changes useEffect(() => { if (searchQuery !== undefined) { refetch(); } }, [searchQuery, refetch]); return (
{/* STICKY HEADER */}
{/* Left side - Logo */}

go4.video

{/* Right side - Navigation + Search */}
{/* Desktop navigation */}
setSearchQuery(e.target.value)} className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56" />
{/* Mobile menu button */}
{/* Mobile menu dropdown */} {isMobileMenuOpen && (
{/* Navigation Section */}

Navigation

{/* Separator */}
{/* Search Section */}

Suchen

setSearchQuery(e.target.value)} className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full" />
)}
{/* Footer */}
); }