feat: Add ProfileCard, SpecializationSection, and TestimonialsSection components to the agent dashboard, and update styling for ExperienceSection.
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
127
src/app/(agent)/agent/dashboard/component/ProfileCard.tsx
Normal file
127
src/app/(agent)/agent/dashboard/component/ProfileCard.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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';
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user