feat: Add ProfileCard, SpecializationSection, and TestimonialsSection components to the agent dashboard, and update styling for ExperienceSection.

This commit is contained in:
pradeepkumar
2026-01-18 19:39:46 +05:30
parent 4aafcdd7c0
commit 867fb0693b
6 changed files with 275 additions and 186 deletions

View File

@@ -16,8 +16,8 @@ interface ExperienceSectionProps {
export function ExperienceSection({ experience }: ExperienceSectionProps) { export function ExperienceSection({ experience }: ExperienceSectionProps) {
return ( return (
<div className="bg-white rounded-[20px] border border-gray-200 p-6"> <div className="bg-white rounded-[20px] p-6">
<h2 className="text-xl font-bold text-[#00293d] font-serif mb-6 text-center lg:text-left">Experience</h2> <h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px] mb-6 text-center lg:text-left">Experience</h2>
<div className="flex flex-col lg:flex-row gap-6 lg:gap-8"> <div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
{/* Left Column */} {/* Left Column */}
<div className="flex-1 space-y-6"> <div className="flex-1 space-y-6">

View File

@@ -0,0 +1,127 @@
'use client';
import Image from 'next/image';
import { Tag } from './Tag';
interface ProfileCardProps {
firstName: string;
lastName: string;
isVerified: boolean;
title: string;
location: string;
memberSince: string;
bio: string;
expertise: string[];
}
export function ProfileCard({
firstName,
lastName,
isVerified,
title,
location,
memberSince,
bio,
expertise,
}: ProfileCardProps) {
return (
<div className="bg-white rounded-[20px] p-6">
{/* Name and Actions Row */}
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
<div className="text-center lg:text-left">
<div className="flex items-center justify-center lg:justify-start gap-2 mb-1">
<h1 className="text-[18px] text-[#00293d] font-serif">
<span className="font-semibold">{firstName}</span>{' '}
<span className="font-normal">{lastName}</span>
</h1>
{isVerified && (
<>
<Image
src="/assets/icons/verified-icon.svg"
alt="Verified"
width={15}
height={14}
/>
<span className="text-[14px] text-[#638559] font-medium font-serif">
(Verified Expert)
</span>
</>
)}
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
<Image
src="/assets/icons/edit-pencil-orange-icon.svg"
alt="Edit name"
width={16}
height={16}
/>
</button>
</div>
<p className="text-[#00293d] text-sm mb-2 font-fractul">{title}</p>
<div className="flex items-center justify-center lg:justify-start gap-4 text-sm text-[#00293d] font-fractul">
<span className="flex items-center gap-1">
<Image
src="/assets/icons/location-pin-icon.svg"
alt="Location"
width={21}
height={19}
/>
<span className="text-[14px] font-bold text-[#00293D] font-serif leading-[19px]">
{location}
</span>
</span>
<span className="flex items-center gap-1">
<Image
src="/assets/icons/calendar-icon.svg"
alt="Calendar"
width={23}
height={21}
/>
<span className="text-[13px] font-medium text-[#00293D] font-serif leading-[18px]">
Member Since {memberSince}
</span>
</span>
</div>
</div>
{/* Action Buttons */}
<div className="flex items-center justify-center lg:justify-start gap-3">
<button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
<Image
src="/assets/icons/message-dark-icon.svg"
alt="Message"
width={14}
height={13}
/>
Message
</button>
<button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
<Image
src="/assets/icons/requests-dark-icon.svg"
alt="Requests"
width={14}
height={13}
/>
Requests
</button>
</div>
</div>
{/* Bio */}
<p className="text-[14px] font-normal text-[#00293D] font-serif leading-[20px] mb-4 text-center lg:text-left">
{bio}
</p>
{/* Expertise Tags */}
<div>
<p className="text-[14px] font-bold text-[#00293D] font-fractul leading-[17px] mb-2 text-center lg:text-left">
Expertise:
</p>
<div className="flex flex-wrap gap-2 justify-center lg:justify-start">
{expertise.map((tag, idx) => (
<Tag key={idx}>{tag}</Tag>
))}
</div>
</div>
</div>
);
}

View File

@@ -0,0 +1,91 @@
'use client';
import Image from 'next/image';
import { SpecializationCard } from './SpecializationCard';
interface SpecializationData {
types: string[];
loanTypes: string[];
propertyTypes: string[];
hobbies: string[];
pricePoints: string[];
}
interface SpecializationSectionProps {
specialization: SpecializationData;
}
export function SpecializationSection({ specialization }: SpecializationSectionProps) {
return (
<div className="bg-[#e8e8e8] rounded-[20px] p-8">
<div className="text-center mb-8">
<h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2>
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
</div>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
<SpecializationCard
title="Specialization"
items={specialization.types}
icon={
<Image
src="/assets/icons/home-icon.svg"
alt="Specialization"
width={24}
height={24}
/>
}
/>
<SpecializationCard
title="Loan Type"
items={specialization.loanTypes}
icon={
<Image
src="/assets/icons/wallet-icon.svg"
alt="Loan Type"
width={24}
height={24}
/>
}
/>
<SpecializationCard
title="Property Type"
items={specialization.propertyTypes}
icon={
<Image
src="/assets/icons/chart-icon.svg"
alt="Property Type"
width={24}
height={24}
/>
}
/>
</div>
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-6 lg:max-w-2xl lg:mx-auto">
<SpecializationCard
title="Hobbies & Interests"
items={specialization.hobbies}
icon={
<Image
src="/assets/icons/heart-icon.svg"
alt="Hobbies"
width={24}
height={24}
/>
}
/>
<SpecializationCard
title="Price Point"
items={specialization.pricePoints}
icon={
<Image
src="/assets/icons/dollar-icon.svg"
alt="Price Point"
width={24}
height={24}
/>
}
/>
</div>
</div>
);
}

View File

@@ -0,0 +1,37 @@
'use client';
import { TestimonialCard } from './TestimonialCard';
interface Testimonial {
id: number;
text: string;
author: string;
role: string;
rating: number;
}
interface TestimonialsSectionProps {
testimonials: Testimonial[];
}
export function TestimonialsSection({ testimonials }: TestimonialsSectionProps) {
return (
<div className="bg-white rounded-[20px] p-8">
<h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-2">Testimonials</h2>
<p className="text-[#00293d]/70 text-sm text-center mb-8">
Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
</p>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
{testimonials.map((testimonial) => (
<TestimonialCard
key={testimonial.id}
text={testimonial.text}
author={testimonial.author}
role={testimonial.role}
rating={testimonial.rating}
/>
))}
</div>
</div>
);
}

View File

@@ -5,5 +5,8 @@ export { InfoCard } from './InfoCard';
export { SpecializationCard } from './SpecializationCard'; export { SpecializationCard } from './SpecializationCard';
export { ProfileSidebar } from './ProfileSidebar'; export { ProfileSidebar } from './ProfileSidebar';
export { ProfileHeader } from './ProfileHeader'; export { ProfileHeader } from './ProfileHeader';
export { ProfileCard } from './ProfileCard';
export { ExperienceSection } from './ExperienceSection'; export { ExperienceSection } from './ExperienceSection';
export { SpecializationSection } from './SpecializationSection';
export { TestimonialCard } from './TestimonialCard'; export { TestimonialCard } from './TestimonialCard';
export { TestimonialsSection } from './TestimonialsSection';

View File

@@ -5,11 +5,11 @@ import Image from 'next/image';
// Import components from component folder // Import components from component folder
import { import {
Tag,
InfoCard, InfoCard,
SpecializationCard,
TestimonialCard,
ExperienceSection, ExperienceSection,
ProfileCard,
SpecializationSection,
TestimonialsSection,
} from './component'; } from './component';
// Mock agent data - in production, this would come from API // Mock agent data - in production, this would come from API
@@ -158,100 +158,16 @@ export default function AgentDashboard() {
{/* Right Content - Profile Info + Experience + All Sections */} {/* Right Content - Profile Info + Experience + All Sections */}
<div className="flex-1 space-y-6"> <div className="flex-1 space-y-6">
{/* Profile Card */} {/* Profile Card */}
<div className="bg-white rounded-[20px] border border-gray-200 p-6"> <ProfileCard
{/* Name and Actions Row */} firstName={firstName}
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4"> lastName={lastName}
<div className="text-center lg:text-left"> isVerified={agentData.isVerified}
<div className="flex items-center justify-center lg:justify-start gap-2 mb-1"> title={agentData.title}
<h1 className="text-[18px] text-[#00293d] font-serif"> location={agentData.location}
<span className="font-semibold">{firstName}</span>{' '} memberSince={agentData.memberSince}
<span className="font-normal">{lastName}</span> bio={agentData.bio}
</h1> expertise={agentData.expertise}
{agentData.isVerified && (
<>
<Image
src="/assets/icons/verified-icon.svg"
alt="Verified"
width={15}
height={14}
/> />
<span className="text-[14px] text-[#638559] font-medium font-serif">
(Verified Expert)
</span>
</>
)}
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
<Image
src="/assets/icons/edit-pencil-orange-icon.svg"
alt="Edit name"
width={16}
height={16}
/>
</button>
</div>
<p className="text-[#00293d] text-sm mb-2 font-fractul">{agentData.title}</p>
<div className="flex items-center justify-center lg:justify-start gap-4 text-sm text-[#00293d] font-fractul">
<span className="flex items-center gap-1">
<Image
src="/assets/icons/location-pin-icon.svg"
alt="Location"
width={21}
height={19}
/>
<span className="text-[14px] font-bold text-[#00293D] font-serif leading-[19px]">
{agentData.location}
</span>
</span>
<span className="flex items-center gap-1">
<Image
src="/assets/icons/calendar-icon.svg"
alt="Calendar"
width={23}
height={21}
/>
<span className="text-[13px] font-medium text-[#00293D] font-serif leading-[18px]">
Member Since {agentData.memberSince}
</span>
</span>
</div>
</div>
{/* Action Buttons */}
<div className="flex items-center justify-center lg:justify-start gap-3">
<button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
<Image
src="/assets/icons/message-dark-icon.svg"
alt="Message"
width={14}
height={13}
/>
Message
</button>
<button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
<Image
src="/assets/icons/requests-dark-icon.svg"
alt="Requests"
width={14}
height={13}
/>
Requests
</button>
</div>
</div>
{/* Bio */}
<p className="text-[14px] font-normal text-[#00293D] font-serif leading-[20px] mb-4 text-center lg:text-left">{agentData.bio}</p>
{/* Expertise Tags */}
<div>
<p className="text-[14px] font-bold text-[#00293D] font-fractul leading-[17px] mb-2 text-center lg:text-left">Expertise:</p>
<div className="flex flex-wrap gap-2 justify-center lg:justify-start">
{agentData.expertise.map((tag, idx) => (
<Tag key={idx}>{tag}</Tag>
))}
</div>
</div>
</div>
{/* Experience Section */} {/* Experience Section */}
<ExperienceSection experience={agentData.experience} /> <ExperienceSection experience={agentData.experience} />
@@ -306,95 +222,10 @@ export default function AgentDashboard() {
</div> </div>
{/* Specialization Section */} {/* Specialization Section */}
<div className="bg-[#e8e8e8] rounded-[20px] p-8"> <SpecializationSection specialization={agentData.specialization} />
<div className="text-center mb-8">
<h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2>
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
</div>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
<SpecializationCard
title="Specialization"
items={agentData.specialization.types}
icon={
<Image
src="/assets/icons/home-icon.svg"
alt="Specialization"
width={24}
height={24}
/>
}
/>
<SpecializationCard
title="Loan Type"
items={agentData.specialization.loanTypes}
icon={
<Image
src="/assets/icons/wallet-icon.svg"
alt="Loan Type"
width={24}
height={24}
/>
}
/>
<SpecializationCard
title="Property Type"
items={agentData.specialization.propertyTypes}
icon={
<Image
src="/assets/icons/chart-icon.svg"
alt="Property Type"
width={24}
height={24}
/>
}
/>
</div>
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-6 lg:max-w-2xl lg:mx-auto">
<SpecializationCard
title="Hobbies & Interests"
items={agentData.specialization.hobbies}
icon={
<Image
src="/assets/icons/heart-icon.svg"
alt="Hobbies"
width={24}
height={24}
/>
}
/>
<SpecializationCard
title="Price Point"
items={agentData.specialization.pricePoints}
icon={
<Image
src="/assets/icons/dollar-icon.svg"
alt="Price Point"
width={24}
height={24}
/>
}
/>
</div>
</div>
{/* Testimonials Section */} {/* Testimonials Section */}
<div className="bg-white rounded-[20px] border border-gray-200 p-8"> <TestimonialsSection testimonials={agentData.testimonials} />
<h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-2">Testimonials</h2>
<p className="text-[#00293d]/70 text-sm text-center mb-8">
Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
</p>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
{agentData.testimonials.map((testimonial) => (
<TestimonialCard
key={testimonial.id}
text={testimonial.text}
author={testimonial.author}
role={testimonial.role}
rating={testimonial.rating}
/>
))}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>