feat: Add user profile page and new modular profile components, integrating them into the agent dashboard.
This commit is contained in:
pradeepkumar
172
src/components/profile/ProfileCard.tsx
Normal file
172
src/components/profile/ProfileCard.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { Tag } from './Tag';
|
||||
|
||||
interface ProfileCardProps {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
isVerified: boolean;
|
||||
title: string;
|
||||
location: string;
|
||||
memberSince: string;
|
||||
bio: string;
|
||||
expertise: string[];
|
||||
showEditButton?: boolean;
|
||||
editHref?: string;
|
||||
messageHref?: string;
|
||||
requestsHref?: string;
|
||||
}
|
||||
|
||||
export function ProfileCard({
|
||||
firstName,
|
||||
lastName,
|
||||
isVerified,
|
||||
title,
|
||||
location,
|
||||
memberSince,
|
||||
bio,
|
||||
expertise,
|
||||
showEditButton = false,
|
||||
editHref = '/agent/edit',
|
||||
messageHref,
|
||||
requestsHref,
|
||||
}: ProfileCardProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-[20px] p-4 lg:p-5">
|
||||
{/* 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>
|
||||
</>
|
||||
)}
|
||||
{showEditButton && (
|
||||
<Link href={editHref} className="p-1 hover:bg-gray-100 rounded transition-colors">
|
||||
<Image
|
||||
src="/assets/icons/edit-pencil-orange-icon.svg"
|
||||
alt="Edit profile"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
</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">
|
||||
{messageHref ? (
|
||||
<Link
|
||||
href={messageHref}
|
||||
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 cursor-pointer"
|
||||
>
|
||||
<Image
|
||||
src="/assets/icons/message-dark-icon.svg"
|
||||
alt="Message"
|
||||
width={14}
|
||||
height={13}
|
||||
/>
|
||||
Message
|
||||
</Link>
|
||||
) : (
|
||||
<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 cursor-pointer"
|
||||
>
|
||||
<Image
|
||||
src="/assets/icons/message-dark-icon.svg"
|
||||
alt="Message"
|
||||
width={14}
|
||||
height={13}
|
||||
/>
|
||||
Message
|
||||
</button>
|
||||
)}
|
||||
{requestsHref ? (
|
||||
<Link
|
||||
href={requestsHref}
|
||||
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 cursor-pointer"
|
||||
>
|
||||
<Image
|
||||
src="/assets/icons/requests-dark-icon.svg"
|
||||
alt="Connect"
|
||||
width={14}
|
||||
height={13}
|
||||
/>
|
||||
{showEditButton ? 'Requests' : 'Connect'}
|
||||
</Link>
|
||||
) : (
|
||||
<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 cursor-pointer"
|
||||
>
|
||||
<Image
|
||||
src="/assets/icons/requests-dark-icon.svg"
|
||||
alt="Connect"
|
||||
width={14}
|
||||
height={13}
|
||||
/>
|
||||
{showEditButton ? 'Requests' : 'Connect'}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user