Partial search bar implementation - added search input below breadcrumbs

- **BookSelector search bar**: Responsive input with 'Search for verses, words, or phrases...' placeholder
- **Mobile-friendly design**: Centered search bar with search icon, spans full width on mobile
- **Search modal integration**: onClick handler calls the same search modal as header icon
- **Positioning**: Search bar placed below breadcrumbs on book selection page
- **Prop passthrough**: onSearchClick prop set up for easy extension to other components

Search bar is now present on main book selection page - ready to extend to other pages
This commit is contained in:
Ryderjj89
2025-09-28 16:04:21 -04:00
parent 6718096ea0
commit 2332a3cd30
2 changed files with 16 additions and 1 deletions

View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { ArrowLeft, FileText, Star, ChevronRight } from 'lucide-react';
import { ArrowLeft, FileText, Star, ChevronRight, Search } from 'lucide-react';
import { getBook } from '../services/api';
interface ChapterSelectorProps {
@@ -10,6 +10,7 @@ interface ChapterSelectorProps {
user?: any;
onFavoriteChange?: () => void;
version?: string;
onSearchClick?: () => void;
}
const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack, formatBookName, user, onFavoriteChange, version = 'esv' }) => {