index.tsx raw

   1  import SearchBar, { TSearchBarRef } from '@/components/SearchBar'
   2  import SearchResult from '@/components/SearchResult'
   3  import { TSearchParams } from '@/types'
   4  import { ArrowLeft } from 'lucide-react'
   5  import { useEffect, useRef, useState } from 'react'
   6  
   7  type SearchOverlayProps = {
   8    open: boolean
   9    onClose: () => void
  10  }
  11  
  12  export default function SearchOverlay({ open, onClose }: SearchOverlayProps) {
  13    const [input, setInput] = useState('')
  14    const [searchParams, setSearchParams] = useState<TSearchParams | null>(null)
  15    const searchBarRef = useRef<TSearchBarRef>(null)
  16    const contentRef = useRef<HTMLDivElement>(null)
  17  
  18    useEffect(() => {
  19      if (open) {
  20        // Focus search bar when overlay opens
  21        setTimeout(() => searchBarRef.current?.focus(), 100)
  22      } else {
  23        // Reset state when overlay closes
  24        setInput('')
  25        setSearchParams(null)
  26      }
  27    }, [open])
  28  
  29    const onSearch = (params: TSearchParams | null) => {
  30      setSearchParams(params)
  31      if (params?.input) {
  32        setInput(params.input)
  33      }
  34      contentRef.current?.scrollTo({ top: 0, behavior: 'instant' })
  35    }
  36  
  37    if (!open) return null
  38  
  39    return (
  40      <div className="fixed inset-0 z-50 bg-background flex flex-col">
  41        {/* Header with back button and search bar */}
  42        <div className="flex items-center h-12 border-b bg-background">
  43          <button
  44            onClick={onClose}
  45            className="flex items-center justify-center w-12 h-full hover:bg-accent transition-colors"
  46            aria-label="Close search"
  47          >
  48            <ArrowLeft className="w-5 h-5" />
  49          </button>
  50          <div className="flex-1 h-full pr-3">
  51            <SearchBar ref={searchBarRef} onSearch={onSearch} input={input} setInput={setInput} />
  52          </div>
  53        </div>
  54  
  55        {/* Search results */}
  56        <div ref={contentRef} className="flex-1 overflow-y-auto bg-background">
  57          <SearchResult searchParams={searchParams} />
  58        </div>
  59      </div>
  60    )
  61  }
  62