127 lines
4.1 KiB
JavaScript
127 lines
4.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Search } from 'lucide-react';
|
|
|
|
export default function SearchUI() {
|
|
const [searchValue, setSearchValue] = useState('');
|
|
const [showSuggestions, setShowSuggestions] = useState(false);
|
|
|
|
// Sample suggestions data - you can replace with dynamic data
|
|
const allSuggestions = [
|
|
'Bride profiles',
|
|
'Groom profiles',
|
|
'Hindu matrimony',
|
|
'Christian matrimony',
|
|
'Muslim matrimony',
|
|
'Tamil bride',
|
|
'Tamil groom',
|
|
'Telugu matrimony',
|
|
'Kannada matrimony',
|
|
'Malayalam matrimony',
|
|
'Marathi matrimony',
|
|
'North Indian bride',
|
|
'Caste based search',
|
|
'Community matches',
|
|
'Horoscope matching',
|
|
'Verified profiles',
|
|
'Premium matches',
|
|
'Divorced / Widowed profiles',
|
|
'NRI matrimony',
|
|
'Professional matches',
|
|
'Doctor groom',
|
|
'Engineer bride',
|
|
'IT professional matches',
|
|
'Age based search',
|
|
'Height based search',
|
|
'Education based matches',
|
|
'Location based matches',
|
|
'Same mother tongue profiles',
|
|
'Partner preference search',
|
|
'Wedding matchmaking',
|
|
];
|
|
|
|
|
|
// Filter suggestions based on search value
|
|
const filteredSuggestions = searchValue.trim()
|
|
? allSuggestions.filter(suggestion =>
|
|
suggestion.toLowerCase().includes(searchValue.toLowerCase())
|
|
)
|
|
: [];
|
|
|
|
const handleSuggestionClick = (suggestion) => {
|
|
setSearchValue(suggestion);
|
|
setShowSuggestions(false);
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
console.log('Searching for:', searchValue);
|
|
setShowSuggestions(false);
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center justify-center px-2 py-9">
|
|
<div className="w-full max-w-4xl">
|
|
{/* Search Container */}
|
|
<div className="relative">
|
|
{/* Shadow/Glow Effect */}
|
|
<div className="absolute -inset-1 bg-green-200/20 rounded-full blur-sm"></div>
|
|
|
|
{/* Main Search Bar */}
|
|
<div className="md:w-[100%] md:m-w-[400px] relative
|
|
flex items-center justify-between
|
|
bg-white md:rounded-full shadow-sm md:overflow-hidden border-1 border-green-600">
|
|
{/* Search Input */}
|
|
<input
|
|
type="text"
|
|
value={searchValue}
|
|
onChange={(e) => {
|
|
setSearchValue(e.target.value);
|
|
setShowSuggestions(true);
|
|
}}
|
|
onFocus={() => setShowSuggestions(true)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
handleSearch();
|
|
}
|
|
}}
|
|
placeholder="Search"
|
|
className="md:flex-1 md:px-8 px-2 py-2 text-lg text-gray-700 placeholder-red-600 bg-transparent outline-none font-medium"
|
|
/>
|
|
|
|
{/* Search Button */}
|
|
<button
|
|
onClick={handleSearch}
|
|
className="bg-green-600 hover:bg-green-700 transition-colors px-8 py-3 flex items-center justify-center min-w-[80px]"
|
|
aria-label="Search"
|
|
>
|
|
<Search className="w-7 h-7 text-white" strokeWidth={2.5} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Suggestions Dropdown */}
|
|
{showSuggestions && filteredSuggestions.length > 0 && (
|
|
<div className="z-99 absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden z-10 max-h-80 overflow-y-auto">
|
|
{filteredSuggestions.map((suggestion, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => handleSuggestionClick(suggestion)}
|
|
className="w-full text-left px-8 py-4 hover:bg-indigo-50 transition-colors flex items-center gap-3 border-b border-gray-100 last:border-b-0"
|
|
>
|
|
<Search className="w-5 h-5 text-gray-400" />
|
|
<span className="text-gray-700 font-medium">{suggestion}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Click outside to close suggestions */}
|
|
{showSuggestions && (
|
|
<div
|
|
className="fixed inset-0 -z-10"
|
|
onClick={() => setShowSuggestions(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |