77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
import { useAuth } from '@/hooks/useAuth';
|
||
import { useCats } from '@/hooks/useCats';
|
||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||
import { Link } from 'react-router-dom';
|
||
import { Trophy, Cat } from 'lucide-react';
|
||
|
||
export default function FeedSidebar() {
|
||
const { user } = useAuth();
|
||
const { data } = useCats(1);
|
||
|
||
const usersMap = new Map<number, { username: string; points: number }>();
|
||
if (data?.cats) {
|
||
for (const cat of data.cats) {
|
||
if (!usersMap.has(cat.user_id)) {
|
||
usersMap.set(cat.user_id, { username: cat.username, points: cat.user_points });
|
||
}
|
||
}
|
||
}
|
||
|
||
const topUsers = Array.from(usersMap.entries())
|
||
.sort((a, b) => b[1].points - a[1].points)
|
||
.slice(0, 5);
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{user && (
|
||
<Link to="/profile" className="flex items-center gap-3 group">
|
||
<Avatar className="h-12 w-12 ring-2 ring-offset-1 ring-orange-200">
|
||
<AvatarFallback className="bg-gradient-to-br from-orange-400 to-rose-500 text-white text-sm font-medium">
|
||
{user.username.charAt(0).toUpperCase()}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<div>
|
||
<p className="text-sm font-semibold group-hover:text-primary transition-colors">{user.username}</p>
|
||
<p className="text-xs text-muted-foreground">🏆 {user.points} баллов</p>
|
||
</div>
|
||
</Link>
|
||
)}
|
||
|
||
<div>
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-50">
|
||
<Trophy className="h-3.5 w-3.5 text-amber-600" />
|
||
</div>
|
||
<h3 className="text-sm font-semibold">Таблица лидеров</h3>
|
||
</div>
|
||
|
||
{topUsers.length === 0 ? (
|
||
<p className="text-sm text-muted-foreground">Пока нет пользователей</p>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{topUsers.map(([id, u], i) => (
|
||
<Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group">
|
||
<span className={`w-5 text-center text-xs font-bold ${
|
||
i === 0 ? 'text-amber-500' : i === 1 ? 'text-stone-400' : i === 2 ? 'text-orange-400' : 'text-muted-foreground'
|
||
}`}>{i + 1}</span>
|
||
<Avatar className="h-8 w-8">
|
||
<AvatarFallback className="text-[10px] bg-gradient-to-br from-orange-400 to-rose-500 text-white">
|
||
{u.username.charAt(0).toUpperCase()}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<span className="text-sm flex-1 truncate font-medium group-hover:text-primary transition-colors">{u.username}</span>
|
||
<span className="text-xs font-semibold text-muted-foreground">{u.points}</span>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="pt-4 text-xs text-muted-foreground/60 space-y-1">
|
||
<p>Catstagram · Делись фото котов</p>
|
||
<p>© 2026</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|