66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ProfileHeaderProps {
|
|
userName: string;
|
|
userEmail: string;
|
|
userImageUrl?: string;
|
|
reservationsCount: number;
|
|
favoritesCount: number;
|
|
onEditProfileClick: () => void;
|
|
}
|
|
|
|
const ProfileHeader = ({
|
|
userName,
|
|
userEmail,
|
|
userImageUrl,
|
|
reservationsCount,
|
|
favoritesCount,
|
|
onEditProfileClick
|
|
}: ProfileHeaderProps) => {
|
|
return (
|
|
<div className="px-5 py-6 bg-white">
|
|
<div className="flex items-center">
|
|
<div className="relative mr-4">
|
|
{userImageUrl ? (
|
|
<img
|
|
src={userImageUrl}
|
|
alt={`Profilna slika uporabnika ${userName}`}
|
|
className="w-20 h-20 rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-20 h-20 rounded-full bg-gray-300 flex items-center justify-center">
|
|
<span className="material-icons text-gray-500 text-3xl">person</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<h1 className="text-xl font-bold text-black">{userName}</h1>
|
|
<p className="text-gray-600 text-sm">{userEmail}</p>
|
|
|
|
<button
|
|
className="mt-2 text-sm text-primary-600 font-medium"
|
|
onClick={onEditProfileClick}
|
|
aria-label="Uredi profil"
|
|
>
|
|
Uredi profil
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between mt-6">
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-black">{reservationsCount}</p>
|
|
<p className="text-sm text-gray-600">Rezervacij</p>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-black">{favoritesCount}</p>
|
|
<p className="text-sm text-gray-600">Priljubljenih</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfileHeader;
|