Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add category selection dropdown and state management to the hero section search.

Browse Source
This commit is contained in:
pradeepkumar
2026-02-10 21:00:23 +05:30
parent 46f5097742
commit 841b776dca
1 changed files with 48 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/home/HeroSection.tsx
View File

@@ -10,11 +10,21 @@ export function HeroSection() {
const router = useRouter();
const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
const [searchParams, setSearchParams] = useState({
category: '',
type: '',
name: '',
location: '',
});
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
// Category options (UI only - no functionality)
const categoryOptions = [
{ id: 'residential', name: 'Residential' },
{ id: 'commercial', name: 'Commercial' },
{ id: 'industrial', name: 'Industrial' },
{ id: 'land', name: 'Land' },
{ id: 'rental', name: 'Rental' },
];
const [validationError, setValidationError] = useState<string | null>(null);
// Fetch agent types on mount
@@ -59,6 +69,11 @@ export function HeroSection() {
setOpenDropdown(openDropdown === dropdown ? null : dropdown);
};
const selectCategory = (value: string) => {
setSearchParams({ ...searchParams, category: value });
setOpenDropdown(null);
};
const selectType = (value: string) => {
setSearchParams({ ...searchParams, type: value });
setOpenDropdown(null);
@@ -103,7 +118,7 @@ export function HeroSection() {
<div className="bg-[#e58625] rounded-[15px] shadow-lg p-3">
<div className="flex flex-col md:flex-row gap-2">
{/* Type Select */}
<div className="relative flex-shrink-0 md:w-[180px]">
<div className="relative flex-shrink-0 md:w-[160px]">
<button
onClick={() => toggleDropdown('type')}
className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
@@ -156,6 +171,38 @@ export function HeroSection() {
/>
</div>
{/* Category Select (UI only) */}
<div className="relative flex-shrink-0 md:w-[160px]">
<button
onClick={() => toggleDropdown('category')}
className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
>
<span className="font-serif text-sm text-[#00293d]">
{searchParams.category ? categoryOptions.find(c => c.id === searchParams.category)?.name : 'Category'}
</span>
<Image
src="/assets/icons/chevron-down-icon.svg"
alt=""
width={10}
height={10}
className={`transition-transform ${openDropdown === 'category' ? 'rotate-180' : ''}`}
/>
</button>
{openDropdown === 'category' && (
<div className="absolute top-full left-0 right-0 mt-0 bg-white rounded-[7px] border border-[#00293d]/10 shadow-lg z-20 overflow-hidden max-h-[200px] overflow-y-auto">
{categoryOptions.map((category, index, arr) => (
<button
key={category.id}
onClick={() => selectCategory(category.id)}
className={`w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#00293d]/5 ${index < arr.length - 1 ? 'border-b border-[#00293d]/10' : ''}`}
>
{category.name}
</button>
))}
</div>
)}
</div>
{/* Search Button */}
<div className="flex-shrink-0">
<button