feat: Add ProfileCard, SpecializationSection, and TestimonialsSection components to the agent dashboard, and update styling for ExperienceSection.
This commit is contained in:
pradeepkumar
@@ -16,8 +16,8 @@ interface ExperienceSectionProps {
|
||||
|
||||
export function ExperienceSection({ experience }: ExperienceSectionProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-[20px] border border-gray-200 p-6">
|
||||
<h2 className="text-xl font-bold text-[#00293d] font-serif mb-6 text-center lg:text-left">Experience</h2>
|
||||
<div className="bg-white rounded-[20px] p-6">
|
||||
<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">
|
||||
{/* Left Column */}
|
||||
<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 { ProfileSidebar } from './ProfileSidebar';
|
||||
export { ProfileHeader } from './ProfileHeader';
|
||||
export { ProfileCard } from './ProfileCard';
|
||||
export { ExperienceSection } from './ExperienceSection';
|
||||
export { SpecializationSection } from './SpecializationSection';
|
||||
export { TestimonialCard } from './TestimonialCard';
|
||||
export { TestimonialsSection } from './TestimonialsSection';
|
||||
|
||||
@@ -5,11 +5,11 @@ import Image from 'next/image';
|
||||
|
||||
// Import components from component folder
|
||||
import {
|
||||
Tag,
|
||||
InfoCard,
|
||||
SpecializationCard,
|
||||
TestimonialCard,
|
||||
ExperienceSection,
|
||||
ProfileCard,
|
||||
SpecializationSection,
|
||||
TestimonialsSection,
|
||||
} from './component';
|
||||
|
||||
// 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 */}
|
||||
<div className="flex-1 space-y-6">
|
||||
{/* Profile Card */}
|
||||
<div className="bg-white rounded-[20px] border border-gray-200 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>
|
||||
{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>
|
||||
<ProfileCard
|
||||
firstName={firstName}
|
||||
lastName={lastName}
|
||||
isVerified={agentData.isVerified}
|
||||
title={agentData.title}
|
||||
location={agentData.location}
|
||||
memberSince={agentData.memberSince}
|
||||
bio={agentData.bio}
|
||||
expertise={agentData.expertise}
|
||||
/>
|
||||
|
||||
{/* Experience Section */}
|
||||
<ExperienceSection experience={agentData.experience} />
|
||||
@@ -306,95 +222,10 @@ export default function AgentDashboard() {
|
||||
</div>
|
||||
|
||||
{/* Specialization Section */}
|
||||
<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={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>
|
||||
<SpecializationSection specialization={agentData.specialization} />
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<div className="bg-white rounded-[20px] border border-gray-200 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">
|
||||
{agentData.testimonials.map((testimonial) => (
|
||||
<TestimonialCard
|
||||
key={testimonial.id}
|
||||
text={testimonial.text}
|
||||
author={testimonial.author}
|
||||
role={testimonial.role}
|
||||
rating={testimonial.rating}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<TestimonialsSection testimonials={agentData.testimonials} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user