diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index b4fb2ef4..f5abcf51 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -562,6 +562,7 @@ function App() { formatBookName={formatBookName} getBookUrlName={getBookUrlName} books={books} + selectedVersion={selectedVersion} onClose={() => setShowSearch(false)} isModal={true} /> @@ -578,6 +579,7 @@ function App() { formatBookName={formatBookName} getBookUrlName={getBookUrlName} books={books} + selectedVersion={selectedVersion} isModal={false} /> } /> diff --git a/frontend/src/components/SearchComponent.tsx b/frontend/src/components/SearchComponent.tsx index e65f08a6..67e39b0b 100644 --- a/frontend/src/components/SearchComponent.tsx +++ b/frontend/src/components/SearchComponent.tsx @@ -7,6 +7,8 @@ interface SearchComponentProps { formatBookName: (bookName: string) => string; getBookUrlName: (bookName: string) => string; books?: string[]; + selectedVersion?: string; + onVersionChange?: (version: string) => void; onClose?: () => void; isModal?: boolean; } @@ -15,6 +17,8 @@ const SearchComponent: React.FC = ({ formatBookName, getBookUrlName, books = [], + selectedVersion: initialVersion = 'esv', + onVersionChange, onClose, isModal = false }) => { @@ -24,6 +28,7 @@ const SearchComponent: React.FC = ({ const [error, setError] = useState(''); const [hasSearched, setHasSearched] = useState(false); const [selectedBook, setSelectedBook] = useState(''); + const [selectedVersion, setSelectedVersion] = useState(initialVersion); const searchTimeoutRef = useRef(); const navigate = useNavigate(); @@ -42,7 +47,8 @@ const SearchComponent: React.FC = ({ const searchOptions = { ...(bookFilter && { book: bookFilter }), limit: 50, - context: true + context: true, + version: selectedVersion }; const response: SearchResponse = await searchBible(searchQuery, searchOptions); @@ -55,7 +61,7 @@ const SearchComponent: React.FC = ({ } finally { setLoading(false); } - }, []); + }, [selectedVersion]); // Handle search input changes useEffect(() => { @@ -137,7 +143,7 @@ const SearchComponent: React.FC = ({ value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search for verses, words, or phrases..." - className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg + className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent" autoFocus @@ -146,7 +152,26 @@ const SearchComponent: React.FC = ({ )} - + + {/* Version Selector */} + +