update svg
This commit is contained in:
pradeepkumar
@@ -3,6 +3,7 @@
|
||||
import { useSession } from 'next-auth/react';
|
||||
import Image from 'next/image';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
// Mock agent data - in production, this would come from API
|
||||
const agentData = {
|
||||
@@ -74,14 +75,13 @@ function StarRating({ rating }: { rating: number }) {
|
||||
return (
|
||||
<div className="flex gap-0.5">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<svg
|
||||
<Image
|
||||
key={star}
|
||||
className={`w-4 h-4 ${star <= rating ? 'text-[#e58625]' : 'text-gray-300'}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
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>
|
||||
);
|
||||
@@ -91,13 +91,12 @@ function StarRating({ rating }: { rating: number }) {
|
||||
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'
|
||||
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'
|
||||
}`}
|
||||
? 'border-[#e58625] text-[#e58625] bg-transparent'
|
||||
: 'border-[#00293d] text-[#00293d] bg-transparent'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
@@ -116,7 +115,7 @@ function SpecializationCard({
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
|
||||
<div className="flex justify-center mb-3 text-[#e58625]">{icon}</div>
|
||||
<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) => (
|
||||
@@ -127,9 +126,12 @@ function SpecializationCard({
|
||||
</div>
|
||||
<button className="mt-4 inline-flex items-center gap-1 text-[#e58625] text-xs font-medium hover:opacity-80 transition-opacity">
|
||||
Show More
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/chevron-down-icon.svg"
|
||||
alt="Show more"
|
||||
width={12}
|
||||
height={12}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
@@ -146,9 +148,9 @@ function InfoCard({
|
||||
icon: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white rounded-[20px] border border-gray-200 p-6 text-center">
|
||||
<div className="flex justify-center mb-3 text-[#e58625]">{icon}</div>
|
||||
{title && <h4 className="font-semibold text-[#00293d] text-sm mb-3">{title}</h4>}
|
||||
<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>
|
||||
);
|
||||
@@ -164,18 +166,25 @@ export default function AgentDashboard() {
|
||||
{/* Left Sidebar - Status & Contact */}
|
||||
<div className="w-full lg:w-[180px] flex-shrink-0 space-y-4">
|
||||
{/* Profile Image */}
|
||||
<div className="relative">
|
||||
<div className="w-[140px] h-[140px] rounded-[20px] bg-[#8fa9a8] overflow-hidden mx-auto lg:mx-0">
|
||||
<div className="w-full h-full bg-gradient-to-br from-[#8fa9a8] to-[#6b8a89] flex items-center justify-center">
|
||||
<svg className="w-20 h-20 text-white/50" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<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>
|
||||
<button className="absolute bottom-2 right-2 lg:right-auto lg:left-[110px] bg-white rounded-lg p-1.5 shadow-md hover:bg-gray-50 transition-colors">
|
||||
<svg className="w-4 h-4 text-[#00293d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
{/* 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>
|
||||
|
||||
@@ -211,9 +220,12 @@ export default function AgentDashboard() {
|
||||
<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">
|
||||
<svg className="w-4 h-4 text-[#00293d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/edit-pencil-icon.svg"
|
||||
alt="Edit phone"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -228,22 +240,30 @@ export default function AgentDashboard() {
|
||||
<div>
|
||||
{/* Name and Verification */}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h1 className="text-xl font-bold text-[#00293d]">
|
||||
<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 && (
|
||||
<span className="text-[#e58625] text-sm font-medium flex items-center gap-1">
|
||||
(Verified Expert)
|
||||
<svg className="w-4 h-4 text-[#5ba4a4]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<>
|
||||
<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">
|
||||
<svg className="w-4 h-4 text-[#5ba4a4]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/edit-pencil-icon.svg"
|
||||
alt="Edit name"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -253,35 +273,56 @@ export default function AgentDashboard() {
|
||||
{/* 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">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/location-icon.svg"
|
||||
alt="Location"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
{agentData.location}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<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-2">
|
||||
<button className="flex items-center gap-2 px-4 py-2 bg-[#e58625] text-white text-sm rounded-lg hover:bg-[#d47a1f] transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
<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 className="flex items-center gap-2 px-4 py-2 bg-[#e58625] text-white text-sm rounded-lg hover:bg-[#d47a1f] transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</Button>
|
||||
<Button
|
||||
variant="action"
|
||||
size="sm"
|
||||
leftIcon={
|
||||
<Image
|
||||
src="/assets/icons/clipboard-icon.svg"
|
||||
alt="Requests"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Requests
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -372,9 +413,12 @@ export default function AgentDashboard() {
|
||||
<InfoCard
|
||||
title="Availability"
|
||||
icon={
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/clock-icon.svg"
|
||||
alt="Availability"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
@@ -390,19 +434,24 @@ export default function AgentDashboard() {
|
||||
<InfoCard
|
||||
title="Preferred work environment"
|
||||
icon={
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/location-large-icon.svg"
|
||||
alt="Work environment"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
}
|
||||
content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
|
||||
/>
|
||||
<InfoCard
|
||||
title=""
|
||||
icon={
|
||||
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/star-icon.svg"
|
||||
alt="Testimonial"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
}
|
||||
content={<p className="text-sm leading-relaxed italic">“{agentData.testimonialHighlight}”</p>}
|
||||
/>
|
||||
@@ -419,28 +468,36 @@ export default function AgentDashboard() {
|
||||
title="Specialization"
|
||||
items={agentData.specialization.types}
|
||||
icon={
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/home-icon.svg"
|
||||
alt="Specialization"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<SpecializationCard
|
||||
title="Loan Type"
|
||||
items={agentData.specialization.loanTypes}
|
||||
icon={
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/wallet-icon.svg"
|
||||
alt="Loan Type"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<SpecializationCard
|
||||
title="Property Type"
|
||||
items={agentData.specialization.propertyTypes}
|
||||
icon={
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
|
||||
<path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/chart-icon.svg"
|
||||
alt="Property Type"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -449,18 +506,24 @@ export default function AgentDashboard() {
|
||||
title="Hobbies & Interests"
|
||||
items={agentData.specialization.hobbies}
|
||||
icon={
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/heart-icon.svg"
|
||||
alt="Hobbies"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<SpecializationCard
|
||||
title="Price Point"
|
||||
items={agentData.specialization.pricePoints}
|
||||
icon={
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/dollar-icon.svg"
|
||||
alt="Price Point"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -484,9 +547,12 @@ export default function AgentDashboard() {
|
||||
<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">
|
||||
<svg className="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
||||
</svg>
|
||||
<Image
|
||||
src="/assets/icons/user-placeholder-icon.svg"
|
||||
alt="User"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<StarRating rating={testimonial.rating} />
|
||||
|
||||
Reference in New Issue
Block a user