61 lines
2 KiB
TypeScript
61 lines
2 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import type { UserProfile } from '../types';
|
|
|
|
interface UserCardProps {
|
|
user: UserProfile;
|
|
}
|
|
|
|
const UserCard: React.FC<UserCardProps> = ({ user }) => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 mb-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<img
|
|
src={user.avatar}
|
|
alt={user.username}
|
|
className="w-16 h-16 rounded-full mr-4"
|
|
/>
|
|
<div>
|
|
<h2 className="text-xl font-bold">{user.nickname}</h2>
|
|
<p className="text-gray-500 dark:text-gray-400">@{user.username}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
|
>
|
|
{isExpanded ? 'Hide Stats' : 'Show Stats'}
|
|
</button>
|
|
</div>
|
|
{isExpanded && (
|
|
<div className="mt-4">
|
|
<div className="grid grid-cols-3 gap-4 text-center">
|
|
<div>
|
|
<p className="font-bold text-lg">{user.followers?.toLocaleString()}</p>
|
|
<p className="text-gray-500 dark:text-gray-400">Followers</p>
|
|
</div>
|
|
<div>
|
|
<p className="font-bold text-lg">{user.following?.toLocaleString()}</p>
|
|
<p className="text-gray-500 dark:text-gray-400">Following</p>
|
|
</div>
|
|
<div>
|
|
<p className="font-bold text-lg">{user.likes?.toLocaleString()}</p>
|
|
<p className="text-gray-500 dark:text-gray-400">Likes</p>
|
|
</div>
|
|
</div>
|
|
{user.bio && (
|
|
<div className="mt-4">
|
|
<h3 className="font-bold">Bio</h3>
|
|
<p className="text-gray-600 dark:text-gray-300">{user.bio}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserCard;
|