sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a search bar for videos to the main pages

Browse Source 
Integrates a search input and icon into the header navigation of the Folx Stadl, Video, and Home pages, enabling users to search for videos.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/lK7HRF1
This commit is contained in:
sebastjanartic 2025-08-30 20:52:53 +00:00
parent 20bf8e939b
commit 66824ab3ed
3 changed files with 49 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/pages/FolxStadlPage.tsx
View File

@ -7,6 +7,8 @@ import { Button } from '@/components/ui/button';
import { useState } from 'react';
import type { Video } from '@shared/schema';
import SearchHeader from '@/components/search-header';
import { Input } from '@/components/ui/input';
import { Search } from 'lucide-react';
export default function FolxStadlPage() {
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
@ -69,7 +71,7 @@ export default function FolxStadlPage() {
</Link>
</div>
{/* Right side - Navigation */}
{/* Right side - Navigation + Search */}
<div className="flex items-center gap-4">
{/* Desktop navigation */}
<div className="hidden md:flex items-center space-x-6">
@ -81,6 +83,20 @@ export default function FolxStadlPage() {
FOLX STADL
</Link>
</nav>
<div className="relative">
<Input
type="search"
placeholder="Search videos..."
value={searchQuery}
onChange={(e) => {
setSearchQuery(e.target.value);
if (e.target.value) window.location.href = `/?search=${encodeURIComponent(e.target.value)}`;
}}
className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
/>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
</div>
</div>
{/* Mobile menu button */}

18
client/src/pages/VideoPage.tsx
View File

@ -33,6 +33,8 @@ const formatDate = (date: Date | string): string => {
import { Button } from "@/components/ui/button";
import { Share2, X, Edit3, Menu, Search, ChevronLeft, ChevronRight } from "lucide-react";
import SearchHeader from "@/components/search-header";
import { Input } from "@/components/ui/input";
import { Link } from "wouter";
import { apiRequest } from "@/lib/queryClient";
import {
FacebookShareButton,
@ -215,7 +217,7 @@ export default function VideoPage() {
</Link>
</div>
{/* Right side - Navigation */}
{/* Right side - Navigation + Search */}
<div className="flex items-center gap-4">
{/* Desktop navigation */}
<div className="hidden md:flex items-center space-x-6">
@ -227,6 +229,20 @@ export default function VideoPage() {
FOLX STADL
</Link>
</nav>
<div className="relative">
<Input
type="search"
placeholder="Search videos..."
value={searchQuery}
onChange={(e) => {
setSearchQuery(e.target.value);
if (e.target.value) window.location.href = `/?search=${encodeURIComponent(e.target.value)}`;
}}
className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
/>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
</div>
</div>
</div>
</div>

16
client/src/pages/home.tsx
View File

@ -3,6 +3,9 @@ import { useQuery } from "@tanstack/react-query";
import { type Video } from "@shared/schema";
import SearchHeader from "@/components/search-header";
import VideoGrid from "@/components/video-grid";
import { Link } from "wouter";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";
import NetflixGrid from "@/components/netflix-grid";
import go4LogoPath from "@assets/go4_1756394900352.png";
@ -86,7 +89,7 @@ export default function Home() {
</Link>
</div>
{/* Right side - Navigation */}
{/* Right side - Navigation + Search */}
<div className="flex items-center gap-4">
{/* Desktop navigation */}
<div className="hidden md:flex items-center space-x-6">
@ -98,6 +101,17 @@ export default function Home() {
FOLX STADL
</Link>
</nav>
<div className="relative">
<Input
type="search"
placeholder="Search videos..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
/>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
</div>
</div>
</div>
</div>