feat: encapsulate profile filtering UI into a new FilterModal component.
This commit is contained in:
pradeepkumar
318
src/components/profiles/FilterModal.tsx
Normal file
318
src/components/profiles/FilterModal.tsx
Normal file
@@ -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<Record<string, boolean>>({
|
||||
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 (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
{/* Backdrop */}
|
||||
<div className="absolute inset-0 bg-black/30" onClick={onClose} />
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative bg-white rounded-[20px] w-[600px] max-h-[90vh] overflow-hidden shadow-xl">
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 bg-white px-8 py-5 border-b border-[#d9d9d9] flex items-center justify-between z-10">
|
||||
<h2 className="font-fractul font-bold text-[25px] text-[#00293d]">Filters</h2>
|
||||
<button onClick={onClose} className="text-[#00293d] hover:opacity-70">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Scrollable Content */}
|
||||
<div className="overflow-y-auto max-h-[calc(90vh-180px)] px-8 py-5">
|
||||
{/* Popular Filters */}
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={() => toggleSection('popularFilters')}
|
||||
className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
|
||||
>
|
||||
Popular Filters
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.popularFilters ? 'rotate-180' : ''}`}>
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
{expandedSections.popularFilters && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{popularFilters.map((filter, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => onToggleFilter('popularFilters', filter)}
|
||||
className={`px-4 py-2.5 rounded-[15px] border border-[#00293d] font-serif text-[14px] transition-colors ${
|
||||
filters.popularFilters?.includes(filter)
|
||||
? 'bg-[#00293d] text-white'
|
||||
: 'bg-white text-[#00293d] hover:bg-[#00293d]/5'
|
||||
}`}
|
||||
>
|
||||
{filter}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#d9d9d9] my-4" />
|
||||
|
||||
{/* Client Specialization */}
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={() => toggleSection('clientSpecialization')}
|
||||
className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
|
||||
>
|
||||
Client Specialization
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.clientSpecialization ? 'rotate-180' : ''}`}>
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
{expandedSections.clientSpecialization && (
|
||||
<>
|
||||
<div className="grid grid-cols-4 gap-x-4 gap-y-3">
|
||||
{clientSpecializations.slice(0, 5).map((option) => (
|
||||
<label key={option} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.clientSpecialization.includes(option)}
|
||||
onChange={() => onToggleFilter('clientSpecialization', option)}
|
||||
className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
|
||||
/>
|
||||
<span className="font-serif text-[15px] text-[#00293d]">{option}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
|
||||
Show More
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#d9d9d9] my-4" />
|
||||
|
||||
{/* Loan Type */}
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={() => toggleSection('loanType')}
|
||||
className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
|
||||
>
|
||||
Loan Type
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.loanType ? 'rotate-180' : ''}`}>
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
{expandedSections.loanType && (
|
||||
<>
|
||||
<div className="grid grid-cols-4 gap-x-4 gap-y-3">
|
||||
{loanTypes.map((option) => (
|
||||
<label key={option} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.loanType.includes(option)}
|
||||
onChange={() => onToggleFilter('loanType', option)}
|
||||
className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
|
||||
/>
|
||||
<span className="font-serif text-[15px] text-[#00293d]">{option}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
|
||||
Show More
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#d9d9d9] my-4" />
|
||||
|
||||
{/* Property Type */}
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={() => toggleSection('propertyType')}
|
||||
className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
|
||||
>
|
||||
Property Type
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.propertyType ? 'rotate-180' : ''}`}>
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
{expandedSections.propertyType && (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-x-4 gap-y-3">
|
||||
{propertyTypes.map((option) => (
|
||||
<label key={option} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.propertyType.includes(option)}
|
||||
onChange={() => onToggleFilter('propertyType', option)}
|
||||
className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
|
||||
/>
|
||||
<span className="font-serif text-[15px] text-[#00293d]">{option}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
|
||||
Show More
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#d9d9d9] my-4" />
|
||||
|
||||
{/* Special Interests and Hobbies */}
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={() => toggleSection('specialInterests')}
|
||||
className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
|
||||
>
|
||||
Special Interests and Hobbies
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.specialInterests ? 'rotate-180' : ''}`}>
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
{expandedSections.specialInterests && (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-x-4 gap-y-3">
|
||||
{specialInterests.map((option) => (
|
||||
<label key={option} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.specialInterests?.includes(option) || false}
|
||||
onChange={() => onToggleFilter('specialInterests', option)}
|
||||
className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
|
||||
/>
|
||||
<span className="font-serif text-[15px] text-[#00293d]">{option}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
|
||||
Show More
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#d9d9d9] my-4" />
|
||||
|
||||
{/* Price Point */}
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={() => toggleSection('pricePoint')}
|
||||
className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
|
||||
>
|
||||
Price Point
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.pricePoint ? 'rotate-180' : ''}`}>
|
||||
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
{expandedSections.pricePoint && (
|
||||
<div className="grid grid-cols-3 gap-x-4 gap-y-3">
|
||||
{pricePoints.map((option) => (
|
||||
<label key={option} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.pricePoint.includes(option)}
|
||||
onChange={() => onToggleFilter('pricePoint', option)}
|
||||
className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
|
||||
/>
|
||||
<span className="font-serif text-[15px] text-[#00293d]">{option}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="sticky bottom-0 bg-white px-8 py-5 border-t border-[#d9d9d9] flex items-center justify-between">
|
||||
<button
|
||||
onClick={onClearAll}
|
||||
className="px-6 py-3 rounded-[15px] border border-[#00293d] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-[#00293d]/5 transition-colors"
|
||||
>
|
||||
Clear all Filters
|
||||
</button>
|
||||
<button
|
||||
onClick={onApply}
|
||||
className="px-8 py-3 rounded-[15px] bg-[#e58625] hover:bg-[#d47720] font-fractul font-bold text-[14px] text-[#00293d] transition-colors"
|
||||
>
|
||||
Apply Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user