132da11941
- Card components: CartItem, WishlistView, PostCard, GroupCard, PlaylistsView, UserCard (7 files) - Settings components: BackupsView, SessionManagement, CloudIntegrationView, OfflineQueueManager (4 files) - DashboardPage: stat cards and activity items hover states (2 instances) - FeedView: input and button hover states (2 instances) - Upload zones: MetadataForm, CreatePlaylistModal, CreateProductView, AddEquipmentView, CreateGroupModal (5 files, 6 instances) - UserCard: avatar border hover state - Total: ~18 files, ~20 instances replaced - Preserved: Focus rings (cyan), active/selected states (cyan) - Action 11.3.1.2 in progress (second batch complete)
84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '../ui/card';
|
|
import { Button } from '../ui/button';
|
|
import { CheckCircle, MoreHorizontal } from 'lucide-react';
|
|
import { User } from '../../types';
|
|
|
|
interface UserCardProps {
|
|
user: Partial<User>;
|
|
onFollow?: () => void;
|
|
onView?: () => void;
|
|
isFollowing?: boolean;
|
|
}
|
|
|
|
export const UserCard: React.FC<UserCardProps> = ({
|
|
user,
|
|
onFollow,
|
|
onView,
|
|
isFollowing,
|
|
}) => {
|
|
return (
|
|
<Card className="flex flex-col items-center text-center p-6 group hover:border-kodo-steel/50 transition-all relative overflow-hidden">
|
|
|
|
<div className="relative mb-4 cursor-pointer" onClick={onView}>
|
|
<div className="w-20 h-20 rounded-full border-2 border-kodo-steel p-1 bg-kodo-ink group-hover:border-kodo-steel/50 transition-colors">
|
|
<img
|
|
src={user.avatar}
|
|
alt={user.username}
|
|
className="w-full h-full rounded-full object-cover"
|
|
/>
|
|
</div>
|
|
{user.roles?.includes('VERIFIED') && (
|
|
<div className="absolute bottom-0 right-0 bg-kodo-cyan text-black rounded-full p-0.5 border-2 border-kodo-ink">
|
|
<CheckCircle className="w-3 h-3" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<h3
|
|
className="font-bold text-white text-lg mb-1 cursor-pointer hover:underline"
|
|
onClick={onView}
|
|
>
|
|
{user.username}
|
|
</h3>
|
|
<p className="text-xs text-kodo-content-dim font-mono mb-3">@{user.username}</p>
|
|
|
|
{user.bio && (
|
|
<p className="text-sm text-kodo-content-dim mb-4 line-clamp-2 min-h-[2.5em]">
|
|
{user.bio}
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex justify-center gap-4 w-full mb-4 border-t border-b border-white/5 py-2">
|
|
<div>
|
|
<div className="font-bold text-white">{user.stats?.tracks || 0}</div>
|
|
<div className="text-[10px] text-kodo-content-dim uppercase">Tracks</div>
|
|
</div>
|
|
<div>
|
|
<div className="font-bold text-white">
|
|
{user.stats?.followers || 0}
|
|
</div>
|
|
<div className="text-[10px] text-kodo-content-dim uppercase">Fans</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 w-full">
|
|
<Button
|
|
variant={isFollowing ? 'ghost' : 'default'}
|
|
size="sm"
|
|
className={`flex-1 ${isFollowing ? 'border border-kodo-steel text-kodo-content-dim' : ''}`}
|
|
onClick={onFollow}
|
|
>
|
|
{isFollowing ? 'Following' : 'Follow'}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="border border-kodo-steel"
|
|
>
|
|
<MoreHorizontal className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|