feat: Add user profile page and new modular profile components, integrating them into the agent dashboard.
This commit is contained in:
pradeepkumar
195
src/app/(user)/user/profile/[id]/page.tsx
Normal file
195
src/app/(user)/user/profile/[id]/page.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
// Import shared components
|
||||
import {
|
||||
InfoCard,
|
||||
ExperienceSection,
|
||||
ProfileCard,
|
||||
SpecializationSection,
|
||||
TestimonialsSection,
|
||||
StatusButtons,
|
||||
ContactInfo,
|
||||
} from '@/components/profile';
|
||||
|
||||
// Mock agent data - in production, this would come from API based on id
|
||||
const getAgentData = (id: string) => ({
|
||||
id,
|
||||
name: 'Brian Neeland',
|
||||
isVerified: true,
|
||||
title: 'Licensed Real Estate Agent',
|
||||
location: 'Colorado',
|
||||
memberSince: 'March 2020',
|
||||
bio: 'Brian brings eight years of hands-on experience helping clients confidently buy, sell, and invest in real estate. He combines strong analytical skills with deep market knowledge to identify the right opportunities and guide clients through every step of the process. With a data-driven approach and clear communication, Brian ensures smooth transactions and informed decisions tailored to each client\'s goals.',
|
||||
expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural', 'FHA', 'Conventional', 'USDA', 'Retirement'],
|
||||
email: 'brian@gmail.com',
|
||||
phone: '+91*******7493',
|
||||
profileImage: '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg',
|
||||
experience: {
|
||||
years: '10+ years',
|
||||
contracts: '10+ Contracts',
|
||||
licensingAreas: ['Colorado Springs', 'Monument', 'Falcon', 'Castle Rock', 'Fountain', 'Momentum'],
|
||||
expertiseYears: [
|
||||
{ area: 'Colorado', years: '10 yrs' },
|
||||
{ area: 'Falcon', years: '10 yrs' },
|
||||
{ area: 'Colorado', years: '10 yrs' },
|
||||
{ area: 'Colorado', years: '10 yrs' },
|
||||
],
|
||||
certifications: [
|
||||
{ name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
|
||||
{ name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
|
||||
],
|
||||
},
|
||||
availability: {
|
||||
type: 'Full-time',
|
||||
days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||
},
|
||||
preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
|
||||
testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.",
|
||||
specialization: {
|
||||
types: ['Buyers', 'Sellers', 'First time Buyers', 'First time Sellers', 'Divorce'],
|
||||
loanTypes: ['Conventional', 'FHA', 'VA', 'USDA'],
|
||||
propertyTypes: ['SFR', 'Town home', 'Rural', 'Luxury', 'Condo'],
|
||||
hobbies: ['Boating', 'Horses', 'RV', 'Automotive', 'Aviation'],
|
||||
pricePoints: ['Under $100K', '$100K – $300K', '$300K – $500K', '$500K – $1M', '$1M and above'],
|
||||
},
|
||||
testimonials: [
|
||||
{
|
||||
id: 1,
|
||||
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
||||
author: 'Kenedy Kenney',
|
||||
role: 'Chief Operations Officer',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
||||
author: 'Kenedy Kenney',
|
||||
role: 'Chief Operations Officer',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
||||
author: 'Kenedy Kenney',
|
||||
role: 'Chief Operations Officer',
|
||||
rating: 5,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export default function AgentProfileView() {
|
||||
const params = useParams();
|
||||
const id = params.id as string;
|
||||
|
||||
// In production, fetch agent data based on id
|
||||
const agentData = getAgentData(id);
|
||||
const [firstName, lastName] = agentData.name.split(' ');
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-6 space-y-6">
|
||||
{/* Main Layout - Responsive: Column on mobile, Row on desktop */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 lg:items-stretch">
|
||||
{/* Left Sidebar - Status & Contact */}
|
||||
<div className="w-full lg:w-[280px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
|
||||
{/* Profile Image */}
|
||||
<div className="relative w-[200px] lg:w-[260px]">
|
||||
<div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden">
|
||||
<Image
|
||||
src={agentData.profileImage}
|
||||
alt="Profile"
|
||||
width={260}
|
||||
height={260}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{/* Gradient Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Buttons */}
|
||||
<StatusButtons />
|
||||
|
||||
{/* Contact Info */}
|
||||
<ContactInfo email={agentData.email} phone={agentData.phone} />
|
||||
</div>
|
||||
|
||||
{/* Right Content - Profile Info + Experience + All Sections */}
|
||||
<div className="flex-1 space-y-4">
|
||||
{/* Profile Card - No edit button for user view */}
|
||||
<ProfileCard
|
||||
firstName={firstName}
|
||||
lastName={lastName}
|
||||
isVerified={agentData.isVerified}
|
||||
title={agentData.title}
|
||||
location={agentData.location}
|
||||
memberSince={agentData.memberSince}
|
||||
bio={agentData.bio}
|
||||
expertise={agentData.expertise}
|
||||
showEditButton={false}
|
||||
/>
|
||||
|
||||
{/* Experience Section */}
|
||||
<ExperienceSection experience={agentData.experience} />
|
||||
|
||||
{/* Info Cards Section */}
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
|
||||
<InfoCard
|
||||
title="Availability"
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/availability-clock-icon.svg"
|
||||
alt="Availability"
|
||||
width={28}
|
||||
height={31}
|
||||
/>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
<p className="font-semibold font-serif text-[14px] leading-[19px] text-[#00293D] mb-2">{agentData.availability.type}</p>
|
||||
<div className="space-y-1">
|
||||
{agentData.availability.days.map((day) => (
|
||||
<p key={day} className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]">{day}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<InfoCard
|
||||
title=""
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/work-environment-icon.svg"
|
||||
alt="Work environment"
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
}
|
||||
content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{agentData.preferredWorkEnvironment}</p>}
|
||||
/>
|
||||
<InfoCard
|
||||
title=""
|
||||
icon={
|
||||
<Image
|
||||
src="/assets/icons/testimonial-star-icon.svg"
|
||||
alt="Testimonial"
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
}
|
||||
content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">“{agentData.testimonialHighlight}”</p>}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Specialization Section */}
|
||||
<SpecializationSection specialization={agentData.specialization} />
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<TestimonialsSection testimonials={agentData.testimonials} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user