fix

src/components/home/HeroSection.tsx

@@ -1,39 +1,39 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
-
-const propertyTypes = [
-  { value: '', label: 'Types' },
-  { value: 'professionals', label: 'Professionals' },
-  { value: 'lenders', label: 'Lenders' },
-];
-
-const categories = [
-  { value: '', label: 'Categories' },
-  { value: 'luxury-homes', label: 'Luxury Homes' },
-  { value: 'commercial', label: 'Commercial' },
-  { value: 'mortgages', label: 'Mortgages' },
-];
+import { agentsService, AgentType } from '@/services/agents.service';
 
 
 export function HeroSection() {
   const router = useRouter();
+  const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
   const [searchParams, setSearchParams] = useState({
     type: '',
     name: '',
     location: '',
-    category: '',
   });
   const [openDropdown, setOpenDropdown] = useState<string | null>(null);
 
+  // Fetch agent types on mount
+  useEffect(() => {
+    const fetchAgentTypes = async () => {
+      try {
+        const types = await agentsService.getAgentTypes();
+        setAgentTypes(types);
+      } catch (error) {
+        console.error('Failed to fetch agent types:', error);
+      }
+    };
+    fetchAgentTypes();
+  }, []);
+
   const handleSearch = () => {
     const params = new URLSearchParams();
     if (searchParams.type) params.set('type', searchParams.type);
     if (searchParams.name) params.set('name', searchParams.name);
     if (searchParams.location) params.set('location', searchParams.location);
-    if (searchParams.category) params.set('category', searchParams.category);
     router.push(`/user/profiles?${params.toString()}`);
   };
 
@@ -45,8 +45,8 @@ export function HeroSection() {
     setOpenDropdown(openDropdown === dropdown ? null : dropdown);
   };
 
-  const selectOption = (field: 'type' | 'category', value: string, label: string) => {
-    setSearchParams({ ...searchParams, [field]: value });
+  const selectType = (value: string) => {
+    setSearchParams({ ...searchParams, type: value });
     setOpenDropdown(null);
   };
 
@@ -79,13 +79,13 @@ 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-[160px]">
+              <div className="relative flex-shrink-0 md:w-[180px]">
                 <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"
                 >
                   <span className="font-serif text-sm text-[#00293d]">
-                    {searchParams.type ? propertyTypes.find(t => t.value === searchParams.type)?.label : 'Types'}
+                    {searchParams.type ? agentTypes.find(t => t.id === searchParams.type)?.name : 'Types'}
                   </span>
                   <Image
                     src="/assets/icons/chevron-down-icon.svg"
@@ -96,14 +96,14 @@ export function HeroSection() {
                   />
                 </button>
                 {openDropdown === 'type' && (
-                  <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">
-                    {propertyTypes.slice(1).map((type, index, arr) => (
+                  <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">
+                    {agentTypes.map((type, index, arr) => (
                       <button
-                        key={type.value}
-                        onClick={() => selectOption('type', type.value, type.label)}
+                        key={type.id}
+                        onClick={() => selectType(type.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' : ''}`}
                       >
-                        {type.label}
+                        {type.name}
                       </button>
                     ))}
                   </div>
@@ -132,38 +132,6 @@ export function HeroSection() {
                 />
               </div>
 
-              {/* Category Select */}
-              <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 ? categories.find(c => c.value === searchParams.category)?.label : 'Categories'}
-                  </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">
-                    {categories.slice(1).map((cat, index, arr) => (
-                      <button
-                        key={cat.value}
-                        onClick={() => selectOption('category', cat.value, cat.label)}
-                        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' : ''}`}
-                      >
-                        {cat.label}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-
               {/* Search Button */}
               <div className="flex-shrink-0">
                 <button

src/services/agents.service.ts

@@ -108,6 +108,11 @@ class AgentsService {
     );
     return response.data.data;
   }
+
+  async getAgentTypes(): Promise<AgentType[]> {
+    const response = await api.get<ApiResponse<AgentType[]>>('/agent-types');
+    return response.data.data;
+  }
 }
 
 export const agentsService = new AgentsService();