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:
@@ -179,6 +179,20 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="w-full max-w-md relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search for verses, words, or phrases..."
|
||||
className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
onClick={onSearchClick}
|
||||
readOnly
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
{version.toUpperCase()} Bible
|
||||
|
||||
@@ -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' }) => {
|
||||
|
||||
Reference in New Issue
Block a user