diff --git a/src/app/(user)/user/profiles/page.tsx b/src/app/(user)/user/profiles/page.tsx index e7dc15f..bd305f9 100644 --- a/src/app/(user)/user/profiles/page.tsx +++ b/src/app/(user)/user/profiles/page.tsx @@ -4,6 +4,7 @@ import { useState } from 'react'; import { useSearchParams } from 'next/navigation'; import Image from 'next/image'; import Link from 'next/link'; +import { FilterModal, FilterState, clientSpecializations, loanTypes, propertyTypes, pricePoints } from '@/components/profiles/FilterModal'; // Sample profile data const profilesData = [ @@ -74,25 +75,6 @@ const profilesData = [ }, ]; -// Filter options -const clientSpecializations = [ - 'Buyers', 'Sellers', 'Divorce', 'First time buyers', 'First time sellers', 'Estate' -]; - -const loanTypes = [ - 'Conventional', 'FHA', 'VA', 'USDA', 'Downpayment Assistance Programs' -]; - -const propertyTypes = [ - 'SFR', 'Townhome', 'condo', 'Manufactured', 'Apartment / Multifamily', - 'Rural', 'Luxury', 'Retirement', 'Investment/ Income Producing', - 'Duplex / Tri-plex / 4-plex', 'Historical', 'Mountain Property' -]; - -const pricePoints = [ - 'Under $100K', '$100K - $300K', '$300K - $500K', '$500K - $1M', '$1M and above' -]; - const categoryTabs = [ { id: 'residential', label: 'Residential' }, { id: 'analytics', label: 'Analytics' }, @@ -271,22 +253,41 @@ export default function ProfilesPage() { const [searchQuery, setSearchQuery] = useState(''); const [activeTab, setActiveTab] = useState('residential'); const [listingType, setListingType] = useState<'agents' | 'lenders'>('agents'); - const [filters, setFilters] = useState({ - clientSpecialization: [] as string[], - loanType: [] as string[], - propertyType: [] as string[], - pricePoint: [] as string[], + const [isFilterModalOpen, setIsFilterModalOpen] = useState(false); + const [filters, setFilters] = useState({ + clientSpecialization: [], + loanType: [], + propertyType: [], + pricePoint: [], + specialInterests: [], + popularFilters: [], }); - const toggleFilter = (category: keyof typeof filters, option: string) => { + const toggleFilter = (category: string, option: string) => { setFilters(prev => ({ ...prev, - [category]: prev[category].includes(option) - ? prev[category].filter(o => o !== option) - : [...prev[category], option] + [category]: (prev[category as keyof FilterState] || []).includes(option) + ? (prev[category as keyof FilterState] || []).filter((o: string) => o !== option) + : [...(prev[category as keyof FilterState] || []), option] })); }; + const clearAllFilters = () => { + setFilters({ + clientSpecialization: [], + loanType: [], + propertyType: [], + pricePoint: [], + specialInterests: [], + popularFilters: [], + }); + }; + + const applyFilters = () => { + setIsFilterModalOpen(false); + // Apply filter logic here + }; + return (
@@ -320,7 +321,10 @@ export default function ProfilesPage() {

Filters

-
+ + {/* Filter Modal */} + setIsFilterModalOpen(false)} + filters={filters} + onToggleFilter={toggleFilter} + onClearAll={clearAllFilters} + onApply={applyFilters} + />
); } diff --git a/src/components/profiles/FilterModal.tsx b/src/components/profiles/FilterModal.tsx new file mode 100644 index 0000000..703a0de --- /dev/null +++ b/src/components/profiles/FilterModal.tsx @@ -0,0 +1,318 @@ +'use client'; + +import { useState } from 'react'; + +// Filter options data +export const clientSpecializations = [ + 'Buyers', 'Sellers', 'Divorce', 'First time buyers', 'First time sellers', 'Estate' +]; + +export const loanTypes = [ + 'Conventional', 'FHA', 'VA', 'USDA', 'Downpayment Assistance Programs' +]; + +export const propertyTypes = [ + 'SFR', 'Townhome', 'condo', 'Manufactured', 'Apartment / Multifamily', + 'Rural', 'Luxury', 'Retirement', 'Investment/ Income Producing', + 'Duplex / Tri-plex / 4-plex', 'Historical', 'Mountain Property' +]; + +export const pricePoints = [ + 'Under $100K', '$100K - $300K', '$300K - $500K', '$500K - $1M', '$1M and above' +]; + +export const specialInterests = [ + 'Workshop / Trade / Craftspace', 'Gardening/Landscape', 'Boating', + 'Automotive', 'Hobby farm', 'Home theater' +]; + +export const popularFilters = [ + 'Sellers Agent', 'First-Time Buyer', 'Buyers Agent', 'Buyers Agent', + 'Buyers Agent', 'First-Time Seller', 'Buyers Agent' +]; + +export interface FilterState { + clientSpecialization: string[]; + loanType: string[]; + propertyType: string[]; + pricePoint: string[]; + specialInterests: string[]; + popularFilters: string[]; +} + +interface FilterModalProps { + isOpen: boolean; + onClose: () => void; + filters: FilterState; + onToggleFilter: (category: string, option: string) => void; + onClearAll: () => void; + onApply: () => void; +} + +export function FilterModal({ isOpen, onClose, filters, onToggleFilter, onClearAll, onApply }: FilterModalProps) { + const [expandedSections, setExpandedSections] = useState>({ + popularFilters: true, + clientSpecialization: true, + loanType: true, + propertyType: true, + specialInterests: true, + pricePoint: true, + }); + + const toggleSection = (section: string) => { + setExpandedSections(prev => ({ ...prev, [section]: !prev[section] })); + }; + + if (!isOpen) return null; + + return ( +
+ {/* Backdrop */} +
+ + {/* Modal */} +
+ {/* Header */} +
+

Filters

+ +
+ + {/* Scrollable Content */} +
+ {/* Popular Filters */} +
+ + {expandedSections.popularFilters && ( +
+ {popularFilters.map((filter, index) => ( + + ))} +
+ )} +
+ +
+ + {/* Client Specialization */} +
+ + {expandedSections.clientSpecialization && ( + <> +
+ {clientSpecializations.slice(0, 5).map((option) => ( + + ))} +
+ + + )} +
+ +
+ + {/* Loan Type */} +
+ + {expandedSections.loanType && ( + <> +
+ {loanTypes.map((option) => ( + + ))} +
+ + + )} +
+ +
+ + {/* Property Type */} +
+ + {expandedSections.propertyType && ( + <> +
+ {propertyTypes.map((option) => ( + + ))} +
+ + + )} +
+ +
+ + {/* Special Interests and Hobbies */} +
+ + {expandedSections.specialInterests && ( + <> +
+ {specialInterests.map((option) => ( + + ))} +
+ + + )} +
+ +
+ + {/* Price Point */} +
+ + {expandedSections.pricePoint && ( +
+ {pricePoints.map((option) => ( + + ))} +
+ )} +
+
+ + {/* Footer */} +
+ + +
+
+
+ ); +}