split componeent
This commit is contained in:
pradeepkumar
@@ -2,8 +2,18 @@
|
||||
|
||||
import { useSession } from 'next-auth/react';
|
||||
import Image from 'next/image';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
// Import components from component folder
|
||||
import {
|
||||
StarRating,
|
||||
Tag,
|
||||
InfoCard,
|
||||
SpecializationCard,
|
||||
ProfileSidebar,
|
||||
ProfileHeader,
|
||||
ExperienceSection,
|
||||
TestimonialCard,
|
||||
} from './component';
|
||||
|
||||
// Mock agent data - in production, this would come from API
|
||||
const agentData = {
|
||||
@@ -16,7 +26,7 @@ const agentData = {
|
||||
expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural', 'FHA', 'Conventional', 'USDA', 'Retirement'],
|
||||
email: 'brian@gmail.com',
|
||||
phone: '+91*******7493',
|
||||
profileImage: '/assets/agent-placeholder.jpg',
|
||||
profileImage: '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg',
|
||||
experience: {
|
||||
years: '10+ years',
|
||||
contracts: '10+ Contracts',
|
||||
@@ -70,92 +80,6 @@ const agentData = {
|
||||
],
|
||||
};
|
||||
|
||||
// Star Rating Component
|
||||
function StarRating({ rating }: { rating: number }) {
|
||||
return (
|
||||
<div className="flex gap-0.5">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Image
|
||||
key={star}
|
||||
src={star <= rating ? '/assets/icons/star-filled-icon.svg' : '/assets/icons/star-empty-icon.svg'}
|
||||
alt={star <= rating ? 'Filled star' : 'Empty star'}
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Tag Component
|
||||
function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) {
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center px-3 py-1 rounded-full text-sm border ${variant === 'light'
|
||||
? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
|
||||
: variant === 'orange'
|
||||
? 'border-[#e58625] text-[#e58625] bg-transparent'
|
||||
: 'border-[#00293d] text-[#00293d] bg-transparent'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// Specialization Card Component
|
||||
function SpecializationCard({
|
||||
title,
|
||||
items,
|
||||
icon,
|
||||
}: {
|
||||
title: string;
|
||||
items: string[];
|
||||
icon: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
|
||||
<div className="flex justify-center mb-3">{icon}</div>
|
||||
<h4 className="font-bold text-[#00293d] text-sm mb-4">{title}</h4>
|
||||
<div className="space-y-1">
|
||||
{items.map((item, idx) => (
|
||||
<p key={idx} className="text-[#00293d] text-sm">
|
||||
{item}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<button className="mt-4 inline-flex items-center gap-1 text-[#e58625] text-xs font-medium hover:opacity-80 transition-opacity">
|
||||
Show More
|
||||
<Image
|
||||
src="/assets/icons/chevron-down-icon.svg"
|
||||
alt="Show more"
|
||||
width={12}
|
||||
height={12}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Info Card Component
|
||||
function InfoCard({
|
||||
title,
|
||||
content,
|
||||
icon,
|
||||
}: {
|
||||
title: string;
|
||||
content: React.ReactNode;
|
||||
icon: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white rounded-[10px] shadow-[0px_10px_20px_0px_rgba(217,217,217,0.5)] p-6 text-center">
|
||||
<div className="flex justify-center mb-3">{icon}</div>
|
||||
{title && <h4 className="font-bold text-[#00293d] text-sm mb-3">{title}</h4>}
|
||||
<div className="text-[#00293d] text-sm">{content}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AgentDashboard() {
|
||||
const { data: session } = useSession();
|
||||
|
||||
@@ -164,249 +88,28 @@ export default function AgentDashboard() {
|
||||
{/* Main Profile Section with Left Sidebar */}
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar - Status & Contact */}
|
||||
<div className="w-full lg:w-[180px] flex-shrink-0 space-y-4">
|
||||
{/* Profile Image */}
|
||||
<div className="relative mx-auto lg:mx-0">
|
||||
{/* Profile Image */}
|
||||
<div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
|
||||
<Image
|
||||
src="/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg"
|
||||
alt="Profile"
|
||||
width={200}
|
||||
height={200}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* Edit Icon - Top Right Outside */}
|
||||
<button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
|
||||
<Image
|
||||
src="/assets/icons/edit-icon.svg"
|
||||
alt="Edit profile"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Status Buttons */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full" />
|
||||
<span className="text-sm text-[#00293d]">Available.</span>
|
||||
</div>
|
||||
<button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-white border border-gray-400 rounded-full" />
|
||||
<span className="text-sm text-[#00293d]">Unavailable.</span>
|
||||
</div>
|
||||
<button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="font-bold text-[#00293d]">Email:</span>
|
||||
<span className="text-[#00293d]">*****brian@gmail.com</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="font-bold text-[#00293d]">Ph.No:</span>
|
||||
<span className="text-[#00293d]">{agentData.phone}</span>
|
||||
<button className="p-1 hover:bg-gray-100 rounded">
|
||||
<Image
|
||||
src="/assets/icons/edit-pencil-icon.svg"
|
||||
alt="Edit phone"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ProfileSidebar
|
||||
profileImage={agentData.profileImage}
|
||||
email="*****brian@gmail.com"
|
||||
phone={agentData.phone}
|
||||
/>
|
||||
|
||||
{/* Right Content - Profile Info */}
|
||||
<div className="flex-1">
|
||||
{/* Profile Header 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>
|
||||
{/* Name and Verification */}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h1 className="text-[18px] text-[#00293d]">
|
||||
<span className="font-bold">{agentData.name.split(' ')[0]}</span>{' '}
|
||||
<span className="font-normal">{agentData.name.split(' ')[1]}</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-icon.svg"
|
||||
alt="Edit name"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<p className="text-[#00293d] text-sm mb-2">{agentData.title}</p>
|
||||
|
||||
{/* Location and Member Since */}
|
||||
<div className="flex items-center gap-4 text-sm text-[#00293d]">
|
||||
<span className="flex items-center gap-1 text-[#e58625] font-medium">
|
||||
<Image
|
||||
src="/assets/icons/location-icon.svg"
|
||||
alt="Location"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
{agentData.location}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Image
|
||||
src="/assets/icons/calendar-icon.svg"
|
||||
alt="Calendar"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Member Since {agentData.memberSince}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="action"
|
||||
size="sm"
|
||||
leftIcon={
|
||||
<Image
|
||||
src="/assets/icons/message-icon.svg"
|
||||
alt="Message"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Message
|
||||
</Button>
|
||||
<Button
|
||||
variant="action"
|
||||
size="sm"
|
||||
leftIcon={
|
||||
<Image
|
||||
src="/assets/icons/clipboard-icon.svg"
|
||||
alt="Requests"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Requests
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bio */}
|
||||
<p className="text-[#00293d] text-sm leading-relaxed mb-4">{agentData.bio}</p>
|
||||
|
||||
{/* Expertise Tags */}
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-2">Expertise:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{agentData.expertise.map((tag, idx) => (
|
||||
<Tag key={idx}>{tag}</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ProfileHeader
|
||||
name={agentData.name}
|
||||
isVerified={agentData.isVerified}
|
||||
title={agentData.title}
|
||||
location={agentData.location}
|
||||
memberSince={agentData.memberSince}
|
||||
bio={agentData.bio}
|
||||
expertise={agentData.expertise}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Experience Section */}
|
||||
<div className="bg-white rounded-[20px] border border-gray-200 p-6">
|
||||
<h2 className="text-xl font-bold text-[#00293d] mb-6">Experience</h2>
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex-1 space-y-6">
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
|
||||
<ul className="list-disc list-inside text-[#00293d] text-sm">
|
||||
<li>{agentData.experience.years}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-2">Number of contract coised</p>
|
||||
<ul className="list-disc list-inside text-[#00293d] text-sm">
|
||||
<li>{agentData.experience.contracts}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-3">Licensing & Areas</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{agentData.experience.licensingAreas.slice(0, 5).map((area, idx) => (
|
||||
<Tag key={idx} variant="light">
|
||||
{area}
|
||||
</Tag>
|
||||
))}
|
||||
{agentData.experience.licensingAreas.length > 5 && (
|
||||
<span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.licensingAreas.length - 5} More</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="hidden lg:block w-px bg-gray-200" />
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex-1 space-y-6">
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise & Years</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{agentData.experience.expertiseYears.slice(0, 3).map((item, idx) => (
|
||||
<Tag key={idx} variant="orange">
|
||||
{item.area} – {item.years}
|
||||
</Tag>
|
||||
))}
|
||||
{agentData.experience.expertiseYears.length > 3 && (
|
||||
<span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.expertiseYears.length - 3}More</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
|
||||
<ul className="space-y-3">
|
||||
{agentData.experience.certifications.map((cert, idx) => (
|
||||
<li key={idx} className="text-[#00293d] text-sm">
|
||||
<span>• {cert.name}</span>
|
||||
<p className="text-[#5ba4a4] text-xs ml-3">{cert.org}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ExperienceSection experience={agentData.experience} />
|
||||
|
||||
{/* Info Cards Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
@@ -537,30 +240,13 @@ export default function AgentDashboard() {
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{agentData.testimonials.map((testimonial) => (
|
||||
<div key={testimonial.id} className="p-4">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<div className="w-8 h-8 rounded-full bg-[#e58625]/20 flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-[#e58625] text-lg font-serif">“</span>
|
||||
</div>
|
||||
<p className="font-bold text-[#00293d] text-sm">I have been working with Lorem .</p>
|
||||
</div>
|
||||
<p className="text-[#00293d]/70 text-sm mb-4 leading-relaxed">{testimonial.text}</p>
|
||||
<div className="flex items-center gap-3 pt-4 border-t border-gray-100">
|
||||
<div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
|
||||
<Image
|
||||
src="/assets/icons/user-placeholder-icon.svg"
|
||||
alt="User"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<StarRating rating={testimonial.rating} />
|
||||
<p className="font-bold text-[#00293d] text-sm">{testimonial.author}</p>
|
||||
<p className="text-[#00293d]/50 text-xs">{testimonial.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TestimonialCard
|
||||
key={testimonial.id}
|
||||
text={testimonial.text}
|
||||
author={testimonial.author}
|
||||
role={testimonial.role}
|
||||
rating={testimonial.rating}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user