HeagBoKaT/cats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: тёплый современный дизайн + русификация

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 10:38:01 +03:00
parent e4b25fe4b7
commit ea0df060e8
17 changed files with 576 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
client/src/components/FeedSidebar.tsx
View File

@@ -2,7 +2,7 @@ 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 } from 'lucide-react';
import { Trophy, Cat } from 'lucide-react';
export default function FeedSidebar() {
const { user } = useAuth();
@@ -25,44 +25,52 @@ export default function FeedSidebar() {
<div className="space-y-6">
{user && (
<Link to="/profile" className="flex items-center gap-3 group">
<Avatar className="h-10 w-10">
<AvatarFallback className="bg-foreground text-background text-sm">
<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-medium group-hover:underline">{user.username}</p>
<p className="text-xs text-muted-foreground">{user.points} pts</p>
<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-1.5 mb-3">
<Trophy className="h-3.5 w-3.5 text-muted-foreground" />
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Leaderboard</h3>
<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-xs text-muted-foreground">No users yet</p>
<p className="text-sm text-muted-foreground">Пока нет пользователей</p>
) : (
<div className="space-y-2.5">
<div className="space-y-3">
{topUsers.map(([id, u], i) => (
<Link key={id} to={`/profile/${id}`} className="flex items-center gap-2.5 group">
<span className={`w-4 text-center text-xs font-mono font-bold ${
i === 0 ? 'text-foreground' : 'text-muted-foreground'
<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-6 w-6">
<AvatarFallback className="text-[9px] bg-foreground text-background">
<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-xs flex-1 truncate group-hover:underline">{u.username}</span>
<span className="text-xs font-mono text-muted-foreground">{u.points}</span>
<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>
);
}