Janady13/llms-txt-hub / apps/web/components/layout/header-search.tsx

1'use client' 2import { Search } from 'lucide-react' 3import { useRef } from 'react' 4import { SearchAutocomplete } from '@/components/search/search-autocomplete' 5 6interface DesktopSearchFormProps { 7 searchQuery: string 8 onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void 9 onInputFocus: () => void 10 onSubmit: (e: React.FormEvent) => void 11 showAutocomplete: boolean 12 onAutocompleteClose: () => void 13 onAutocompleteSelect: () => void 14} 15 16/** 17 * Desktop search form component 18 * 19 * @param searchQuery - Current search query 20 * @param onSearchChange - Search input change handler 21 * @param onInputFocus - Input focus handler 22 * @param onSubmit - Form submission handler 23 * @param showAutocomplete - Whether autocomplete is shown 24 * @param onAutocompleteClose - Autocomplete close handler 25 * @param onAutocompleteSelect - Autocomplete selection handler 26 * @returns JSX.Element - Desktop search form 27 */ 28export function DesktopSearchForm({ 29 searchQuery, 30 onSearchChange, 31 onInputFocus, 32 onSubmit, 33 showAutocomplete, 34 onAutocompleteClose, 35 onAutocompleteSelect 36}: DesktopSearchFormProps) { 37 const searchInputRef = useRef<HTMLInputElement>(null) 38 39 return ( 40 <div className="hidden md:block flex-1 2xl:flex-none 2xl:w-full max-w-2xl 2xl:max-w-none"> 41 <form onSubmit={onSubmit} className="relative 2xl:max-w-2xl 2xl:mx-auto"> 42 <input 43 ref={searchInputRef} 44 type="text" 45 placeholder="Search websites, tools, and platforms..." 46 value={searchQuery} 47 onChange={onSearchChange} 48 onFocus={onInputFocus} 49 className="w-full rounded-lg border border-input bg-background px-4 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" 50 /> 51 <button 52 type="submit" 53 className="absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground" 54 aria-label="Search" 55 > 56 <Search className="h-4 w-4" /> 57 </button> 58 <SearchAutocomplete 59 searchQuery={searchQuery} 60 isOpen={showAutocomplete} 61 onClose={onAutocompleteClose} 62 anchorRef={searchInputRef} 63 onSelect={onAutocompleteSelect} 64 /> 65 </form> 66 </div> 67 ) 68} 69 70interface MobileSearchOverlayProps { 71 showMobileSearch: boolean 72 searchQuery: string 73 onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void 74 onInputFocus: () => void 75 onSubmit: (e: React.FormEvent) => void 76 showMobileAutocomplete: boolean 77 onMobileSearchClose: () => void 78 onAutocompleteSelect: () => void 79} 80 81/** 82 * Mobile search overlay component 83 * 84 * @param showMobileSearch - Whether mobile search is shown 85 * @param searchQuery - Current search query 86 * @param onSearchChange - Search input change handler 87 * @param onInputFocus - Input focus handler 88 * @param onSubmit - Form submission handler 89 * @param showMobileAutocomplete - Whether mobile autocomplete is shown 90 * @param onMobileSearchClose - Mobile search close handler 91 * @param onAutocompleteSelect - Autocomplete selection handler 92 * @returns JSX.Element - Mobile search overlay 93 */ 94export function MobileSearchOverlay({ 95 showMobileSearch, 96 searchQuery, 97 onSearchChange, 98 onInputFocus, 99 onSubmit, 100 showMobileAutocomplete, 101 onMobileSearchClose, 102 onAutocompleteSelect 103}: MobileSearchOverlayProps) { 104 const mobileSearchInputRef = useRef<HTMLInputElement>(null) 105 106 if (!showMobileSearch) return null 107 108 return ( 109 <> 110 {/* Backdrop */} 111 <button 112 type="button" 113 className="md:hidden fixed inset-0 top-16 z-40 bg-black/50 backdrop-blur-sm" 114 onClick={onMobileSearchClose} 115 aria-label="Close search" 116 /> 117 {/* Search container */} 118 <div className="md:hidden fixed inset-x-0 top-16 z-50 bg-background"> 119 <div className="px-4 sm:px-6 py-3 border-t"> 120 <form onSubmit={onSubmit} className="relative"> 121 <input 122 ref={mobileSearchInputRef} 123 type="text" 124 placeholder="Search AI documentation and tools..." 125 value={searchQuery} 126 onChange={onSearchChange} 127 onFocus={onInputFocus} 128 className="w-full rounded-lg border border-input bg-background px-4 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" 129 /> 130 <button 131 type="submit" 132 className="absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground" 133 aria-label="Search" 134 > 135 <Search className="h-4 w-4" /> 136 </button> 137 <SearchAutocomplete 138 searchQuery={searchQuery} 139 isOpen={showMobileAutocomplete} 140 onClose={() => onMobileSearchClose()} 141 anchorRef={mobileSearchInputRef} 142 onSelect={onAutocompleteSelect} 143 /> 144 </form> 145 </div> 146 </div> 147 </> 148 ) 149} 150