Fixed search box centering consistency - removed redundant container wrapper
- **Eliminated duplicate container** from VersionSelector component - **Matches other page structures** - all pages now use App's main container - **Consistent centering across all pages** - search bar positioned identically - **No more shifting** when navigating between version selector and book selector Version selector layout now perfectly matches BookSelector, ChapterSelector, BibleReader!
This commit is contained in:
Ryderjj89
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Book, Users, Search } from 'lucide-react';
|
||||
import { Search } from 'lucide-react';
|
||||
|
||||
interface VersionSelectorProps {
|
||||
onVersionSelect: (version: 'esv' | 'nkjv') => void;
|
||||
@@ -9,75 +9,73 @@ interface VersionSelectorProps {
|
||||
const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSearchClick }) => {
|
||||
return (
|
||||
<div>
|
||||
{/* Search Bar */}
|
||||
<div className="flex justify-center mb-4">
|
||||
<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>
|
||||
|
||||
{/* Version Selection */}
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
|
||||
{/* Search Bar */}
|
||||
<div className="flex justify-center mb-4">
|
||||
<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 mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Choose Your Translation
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
Select a Bible translation to begin your study
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Choose Your Translation
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
Select a Bible translation to begin your study
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto">
|
||||
{/* ESV Card */}
|
||||
<div
|
||||
onClick={() => onVersionSelect('esv')}
|
||||
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
|
||||
>
|
||||
<div className="p-8">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-20 h-20 mb-4 flex items-center justify-center">
|
||||
<img src="/logos/esv-logo.png" alt="ESV Logo" className="max-w-full max-h-full" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
ESV
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
English Standard Version
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
A literal translation that balances clarity and dignity
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto">
|
||||
{/* ESV Card */}
|
||||
<div
|
||||
onClick={() => onVersionSelect('esv')}
|
||||
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
|
||||
>
|
||||
<div className="p-8">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-20 h-20 mb-4 flex items-center justify-center">
|
||||
<img src="/logos/esv-logo.png" alt="ESV Logo" className="max-w-full max-h-full" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
ESV
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
English Standard Version
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
A literal translation that balances clarity and dignity
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* NKJV Card */}
|
||||
<div
|
||||
onClick={() => onVersionSelect('nkjv')}
|
||||
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
|
||||
>
|
||||
<div className="p-8">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-20 h-20 mb-4 flex items-center justify-center">
|
||||
<img src="/logos/nkjv-logo.png" alt="NKJV Logo" className="max-w-full max-h-full" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
NKJV
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
New King James Version
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Updated language while preserving the majesty of the original
|
||||
</p>
|
||||
{/* NKJV Card */}
|
||||
<div
|
||||
onClick={() => onVersionSelect('nkjv')}
|
||||
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
|
||||
>
|
||||
<div className="p-8">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-20 h-20 mb-4 flex items-center justify-center">
|
||||
<img src="/logos/nkjv-logo.png" alt="NKJV Logo" className="max-w-full max-h-full" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
NKJV
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
New King James Version
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Updated language while preserving the majesty of the original
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user