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 React from 'react';
|
||||||
import { Book, Users, Search } from 'lucide-react';
|
import { Search } from 'lucide-react';
|
||||||
|
|
||||||
interface VersionSelectorProps {
|
interface VersionSelectorProps {
|
||||||
onVersionSelect: (version: 'esv' | 'nkjv') => void;
|
onVersionSelect: (version: 'esv' | 'nkjv') => void;
|
||||||
@@ -9,75 +9,73 @@ interface VersionSelectorProps {
|
|||||||
const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSearchClick }) => {
|
const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSearchClick }) => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<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 */}
|
{/* Version Selection */}
|
||||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
|
<div className="text-center mb-12">
|
||||||
{/* Search Bar */}
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||||
<div className="flex justify-center mb-4">
|
Choose Your Translation
|
||||||
<div className="w-full max-w-md relative">
|
</h2>
|
||||||
<input
|
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||||
type="text"
|
Select a Bible translation to begin your study
|
||||||
placeholder="Search for verses, words, or phrases..."
|
</p>
|
||||||
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"
|
</div>
|
||||||
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">
|
<div className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto">
|
||||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
{/* ESV Card */}
|
||||||
Choose Your Translation
|
<div
|
||||||
</h2>
|
onClick={() => onVersionSelect('esv')}
|
||||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
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"
|
||||||
Select a Bible translation to begin your study
|
>
|
||||||
</p>
|
<div className="p-8">
|
||||||
</div>
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="w-20 h-20 mb-4 flex items-center justify-center">
|
||||||
<div className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto">
|
<img src="/logos/esv-logo.png" alt="ESV Logo" className="max-w-full max-h-full" />
|
||||||
{/* 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>
|
||||||
|
<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>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* NKJV Card */}
|
{/* NKJV Card */}
|
||||||
<div
|
<div
|
||||||
onClick={() => onVersionSelect('nkjv')}
|
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"
|
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="p-8">
|
||||||
<div className="flex flex-col items-center text-center">
|
<div className="flex flex-col items-center text-center">
|
||||||
<div className="w-20 h-20 mb-4 flex items-center justify-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" />
|
<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>
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user