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

refactor: update TopProfessionals to use CMS data and implement dynamic featured agent fetching in FeaturesSection

Browse Source
This commit is contained in:
pradeepkumar
2026-03-28 22:04:20 +05:30
parent a60776be8b
commit 8dbc5c3842
3 changed files with 97 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/home/FeaturesSection.tsx
View File

@@ -4,6 +4,8 @@ import { useState, useEffect } from 'react';
import Image from 'next/image';
import type { FeaturesContent, FeaturedAgentItem } from '@/types/cms';
import { resolveImageUrl } from '@/services/cms.service';
import { agentsService } from '@/services/agents.service';
import { uploadService } from '@/services/upload.service';
const defaultContent: FeaturesContent = {
title: 'Find Trusted Real Estate Professionals On Demand',
@@ -101,9 +103,49 @@ function AgentCard({ agent, className = '' }: { agent: FeaturedAgentItem; classN
export function FeaturesSection({ content }: { content?: FeaturesContent }) {
const data = content ?? defaultContent;
const agents = data.featuredAgents?.length ? data.featuredAgents : defaultContent.featuredAgents!;
const [agents, setAgents] = useState<FeaturedAgentItem[]>([]);
const [activeCard, setActiveCard] = useState(0);
useEffect(() => {
const fetchFeaturedAgents = async () => {
try {
const featured = await agentsService.getFeaturedAgents(3);
if (featured.length > 0) {
// Map API response to FeaturedAgentItem format
const mapped = await Promise.all(
featured.map(async (agent) => {
let imageUrl = '/assets/icons/user-placeholder-icon.svg';
if (agent.avatar) {
if (agent.avatar.startsWith('http') || agent.avatar.startsWith('/')) {
imageUrl = agent.avatar;
} else {
try {
imageUrl = await uploadService.getPresignedDownloadUrl(agent.avatar);
} catch (_e) {
// use placeholder
}
}
}
return {
name: `${agent.firstName || ''} ${agent.lastName || ''}`.trim(),
role: agent.agentType?.name || '',
rating: agent.averageRating ? String(agent.averageRating) : '',
location: agent.city || agent.state || '',
experience: agent.experience ? `${agent.experience}+ years in the real estate industry.` : '',
imageUrl,
};
}),
);
setAgents(mapped);
}
} catch (err) {
console.error('Failed to fetch featured agents:', err);
}
};
fetchFeaturedAgents();
}, []);
return (
<section className="py-16 md:py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -128,32 +170,36 @@ export function FeaturesSection({ content }: { content?: FeaturesContent }) {
</div>
{/* Right Side - Agent Cards (Desktop) */}
<div className="lg:w-1/2 relative min-h-[650px] hidden lg:block">
{agents[0] && <AgentCard agent={agents[0]} className="absolute top-0 left-0 shadow-lg z-10" />}
{agents[1] && <AgentCard agent={agents[1]} className="absolute top-[170px] right-0 shadow-lg z-20" />}
{agents[2] && <AgentCard agent={agents[2]} className="absolute top-[320px] left-[60px] shadow-lg z-30" />}
</div>
{agents.length > 0 && (
<div className="lg:w-1/2 relative min-h-[650px] hidden lg:block">
{agents[0] && <AgentCard agent={agents[0]} className="absolute top-0 left-0 shadow-lg z-10" />}
{agents[1] && <AgentCard agent={agents[1]} className="absolute top-[170px] right-0 shadow-lg z-20" />}
{agents[2] && <AgentCard agent={agents[2]} className="absolute top-[320px] left-[60px] shadow-lg z-30" />}
</div>
)}
{/* Mobile Agent Cards - Tab style with dots */}
<div className="lg:hidden">
<div className="flex justify-center">
<AgentCard agent={agents[activeCard]} className="shadow-lg" />
{agents.length > 0 && (
<div className="lg:hidden">
<div className="flex justify-center">
<AgentCard agent={agents[activeCard]} className="shadow-lg" />
</div>
{/* Dot indicators */}
<div className="flex justify-center gap-2 mt-4">
{agents.map((_, index) => (
<button
key={index}
onClick={() => setActiveCard(index)}
className={`rounded-full transition-all ${
index === activeCard
? 'w-[10px] h-[10px] bg-[#00293d]'
: 'w-[8px] h-[8px] bg-[#00293d]/30'
}`}
/>
))}
</div>
</div>
{/* Dot indicators */}
<div className="flex justify-center gap-2 mt-4">
{agents.map((_, index) => (
<button
key={index}
onClick={() => setActiveCard(index)}
className={`rounded-full transition-all ${
index === activeCard
? 'w-[10px] h-[10px] bg-[#00293d]'
: 'w-[8px] h-[8px] bg-[#00293d]/30'
}`}
/>
))}
</div>
</div>
)}
</div>
</div>
</section>