142 lines
4.1 KiB
TypeScript
142 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Tag } from './Tag';
|
|
|
|
interface ProfileHeaderProps {
|
|
name: string;
|
|
isVerified: boolean;
|
|
title: string;
|
|
location: string;
|
|
memberSince: string;
|
|
bio: string;
|
|
expertise: string[];
|
|
}
|
|
|
|
export function ProfileHeader({
|
|
name,
|
|
isVerified,
|
|
title,
|
|
location,
|
|
memberSince,
|
|
bio,
|
|
expertise,
|
|
}: ProfileHeaderProps) {
|
|
const [firstName, lastName] = name.split(' ');
|
|
|
|
return (
|
|
<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] font-[family-name:var(--font-fractul)]">
|
|
<span className="font-bold">{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={19}
|
|
height={19}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<p className="text-[#00293d] text-sm mb-2">{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}
|
|
/>
|
|
{location}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Image
|
|
src="/assets/icons/calendar-icon.svg"
|
|
alt="Calendar"
|
|
width={16}
|
|
height={16}
|
|
/>
|
|
Member Since {memberSince}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="relative overflow-visible">
|
|
<Button
|
|
variant="action"
|
|
size="sm"
|
|
leftIcon={
|
|
<Image
|
|
src="/assets/icons/message-icon.svg"
|
|
alt="Message"
|
|
width={16}
|
|
height={16}
|
|
/>
|
|
}
|
|
>
|
|
Message
|
|
</Button>
|
|
<span className="absolute -top-2 -right-2 w-3 h-3 bg-red-500 rounded-full border-2 border-white z-10"></span>
|
|
</div>
|
|
<div className="relative overflow-visible">
|
|
<Button
|
|
variant="action"
|
|
size="sm"
|
|
leftIcon={
|
|
<Image
|
|
src="/assets/icons/clipboard-icon.svg"
|
|
alt="Requests"
|
|
width={16}
|
|
height={16}
|
|
/>
|
|
}
|
|
>
|
|
Requests
|
|
</Button>
|
|
<span className="absolute -top-2 -right-2 w-3 h-3 bg-red-500 rounded-full border-2 border-white z-10"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bio */}
|
|
<p className="text-[#00293d] text-sm leading-relaxed mb-4">{bio}</p>
|
|
|
|
{/* Expertise Tags */}
|
|
<div>
|
|
<p className="font-bold text-[#00293d] text-sm mb-2">Expertise:</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{expertise.map((tag, idx) => (
|
|
<Tag key={idx}>{tag}</Tag>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|