UI: Telegram-стиль, синий акцент, bubble-карточки
This commit is contained in:
@@ -2,9 +2,8 @@ import { useState } from 'react';
|
||||
import { Cat } from '@/api/endpoints';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Heart, MessageCircle } from 'lucide-react';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
|
||||
interface CatCardProps {
|
||||
cat: Cat;
|
||||
@@ -15,23 +14,13 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
|
||||
const { user, updateUser } = useAuth();
|
||||
const [liked, setLiked] = useState(false);
|
||||
const [likeCount, setLikeCount] = useState(cat.likes_count);
|
||||
const [animating, setAnimating] = useState(false);
|
||||
const [showHeart, setShowHeart] = useState(false);
|
||||
const { toast } = useToast();
|
||||
const likeMutation = useLikeCat(cat.id);
|
||||
const unlikeMutation = useUnlikeCat(cat.id);
|
||||
const isOwner = user && cat.user_id === user.id;
|
||||
|
||||
const handleDoubleClick = () => {
|
||||
setShowHeart(true);
|
||||
setTimeout(() => setShowHeart(false), 500);
|
||||
if (!liked && !isOwner) handleLikeAction();
|
||||
};
|
||||
|
||||
const handleLikeAction = async () => {
|
||||
const toggleLike = async () => {
|
||||
if (isOwner || !user) return;
|
||||
setAnimating(true);
|
||||
setTimeout(() => setAnimating(false), 450);
|
||||
|
||||
if (liked) {
|
||||
setLiked(false);
|
||||
@@ -44,109 +33,90 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
|
||||
} else {
|
||||
setLiked(true);
|
||||
setLikeCount((c) => c + 1);
|
||||
toast('Нравится ♥', 'like');
|
||||
toast('Нравится', 'like');
|
||||
try { await likeMutation.mutateAsync(); }
|
||||
catch { setLiked(false); setLikeCount((c) => c - 1); }
|
||||
}
|
||||
};
|
||||
|
||||
const handleLike = () => handleLikeAction();
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const d = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - d.getTime();
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
if (days === 0) return 'Сегодня';
|
||||
if (days === 1) return 'Вчера';
|
||||
return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long' });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="animate-fade-in bg-white rounded-2xl shadow-sm border border-border/60 overflow-hidden mb-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<div
|
||||
className="flex items-center gap-2.5 cursor-pointer"
|
||||
onClick={() => window.location.href = `/profile/${cat.user_id}`}
|
||||
>
|
||||
<Avatar className="h-8 w-8 ring-2 ring-offset-1 ring-orange-200">
|
||||
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<span className="text-sm font-semibold text-foreground">@{cat.username}</span>
|
||||
<span className="ml-2 text-xs text-muted-foreground">{formatDate(cat.created_at)}</span>
|
||||
<div className="animate-fade-in mb-2.5 last:mb-0">
|
||||
<div className="tg-bubble border shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-3.5 py-2.5">
|
||||
<div
|
||||
className="flex items-center gap-2.5 cursor-pointer"
|
||||
onClick={() => onOpen(cat.id)}
|
||||
>
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="text-xs bg-[#2aabee] text-white">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<span className="text-[15px] font-medium leading-none block">@{cat.username}</span>
|
||||
<span className="text-[12px] text-[#8e8e93] leading-none mt-0.5 block">
|
||||
{new Date(cat.created_at).toLocaleDateString('ru-RU', {
|
||||
day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<div
|
||||
className="relative bg-gradient-to-b from-transparent to-muted/30 cursor-pointer"
|
||||
onDoubleClick={handleDoubleClick}
|
||||
onClick={() => onOpen(cat.id)}
|
||||
>
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
className="w-full max-h-[520px] object-contain select-none"
|
||||
draggable={false}
|
||||
loading="lazy"
|
||||
/>
|
||||
{showHeart && (
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<Heart className="heart-burst h-24 w-24 text-white drop-shadow-xl" strokeWidth={1.5} />
|
||||
{/* Image */}
|
||||
<div
|
||||
className="cursor-pointer bg-[#f0f0f0]"
|
||||
onClick={() => onOpen(cat.id)}
|
||||
>
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
className="w-full max-h-[460px] object-contain select-none"
|
||||
draggable={false}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Caption */}
|
||||
{cat.caption && (
|
||||
<div className="px-3.5 pt-2.5" onClick={() => onOpen(cat.id)}>
|
||||
<span className="text-[15px] leading-[1.3]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
{cat.caption}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="px-4 pt-3 pb-1">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={handleLike}
|
||||
disabled={isOwner || !user}
|
||||
className={`like-btn ${animating ? 'heart-animate' : ''}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6 w-6 transition-all ${
|
||||
liked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
|
||||
{/* Actions row */}
|
||||
<div className="flex items-center justify-between px-3.5 py-2.5">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={toggleLike}
|
||||
disabled={isOwner || !user}
|
||||
className={`flex items-center gap-1.5 text-[13px] font-medium transition-colors ${
|
||||
liked ? 'text-[#ff3b30]' : 'text-[#8e8e93] hover:text-black'
|
||||
}`}
|
||||
strokeWidth={liked ? 2.5 : 1.5}
|
||||
/>
|
||||
</button>
|
||||
<button onClick={() => onOpen(cat.id)} className="hover:text-primary transition-colors">
|
||||
<MessageCircle className="h-6 w-6" strokeWidth={1.5} />
|
||||
</button>
|
||||
>
|
||||
<span className={`text-base leading-none ${liked ? 'heart-animate' : ''}`}>
|
||||
{liked ? '❤️' : '🤍'}
|
||||
</span>
|
||||
{likeCount > 0 && <span>{likeCount}</span>}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onOpen(cat.id)}
|
||||
className="flex items-center gap-1.5 text-[13px] font-medium text-[#8e8e93] hover:text-black transition-colors"
|
||||
>
|
||||
<span className="text-base leading-none">💬</span>
|
||||
<span>Комментарии</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{cat.user_points > 0 && (
|
||||
<span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Likes */}
|
||||
<div className="px-4 pb-0.5">
|
||||
<span className="text-sm font-bold">{likeCount.toLocaleString('ru-RU')} отметок «Нравится»</span>
|
||||
</div>
|
||||
|
||||
{/* Caption */}
|
||||
{cat.caption && (
|
||||
<div className="px-4 pb-0.5">
|
||||
<span className="text-sm">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
{cat.caption}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Comments link */}
|
||||
<div className="px-4 pb-3">
|
||||
<button
|
||||
onClick={() => onOpen(cat.id)}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Смотреть комментарии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Heart, MessageCircle, X, Trash2 } from 'lucide-react';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
interface CatModalProps {
|
||||
catId: number;
|
||||
@@ -22,7 +22,6 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
|
||||
const [liked, setLiked] = useState(false);
|
||||
const [likeCount, setLikeCount] = useState(0);
|
||||
const [animating, setAnimating] = useState(false);
|
||||
|
||||
useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]);
|
||||
useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]);
|
||||
@@ -31,24 +30,20 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
const cat = data?.cat;
|
||||
const isOwner = cat && user && cat.user_id === user.id;
|
||||
|
||||
const handleLike = async () => {
|
||||
const toggleLike = async () => {
|
||||
if (isOwner || !user || !cat) return;
|
||||
setAnimating(true);
|
||||
setTimeout(() => setAnimating(false), 450);
|
||||
|
||||
if (liked) {
|
||||
setLiked(false);
|
||||
setLikeCount((c) => c - 1);
|
||||
try {
|
||||
const res = await unlikeMutation.mutateAsync();
|
||||
if (res.ownerPoints !== undefined && cat.user_id === user.id)
|
||||
updateUser({ ...user, points: res.ownerPoints });
|
||||
if (res.ownerPoints !== undefined && cat.user_id === user.id) updateUser({ ...user, points: res.ownerPoints });
|
||||
refetchLike();
|
||||
} catch { setLiked(true); setLikeCount((c) => c + 1); }
|
||||
} else {
|
||||
setLiked(true);
|
||||
setLikeCount((c) => c + 1);
|
||||
toast('Нравится ♥', 'like');
|
||||
toast('Нравится', 'like');
|
||||
try { await likeMutation.mutateAsync(); refetchLike(); }
|
||||
catch { setLiked(false); setLikeCount((c) => c - 1); }
|
||||
}
|
||||
@@ -65,90 +60,87 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
|
||||
if (isLoading || !cat) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={onClose}>
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-white/40 border-t-white" />
|
||||
<div className="fixed inset-0 z-[60] bg-black/60" onClick={onClose}>
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-white/40 border-t-white" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4" onClick={onClose}>
|
||||
<div className="fixed inset-0 z-[60] bg-black/60 flex items-end sm:items-center justify-center" onClick={onClose}>
|
||||
<div
|
||||
className="animate-scale-in flex max-h-[85vh] w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden"
|
||||
className="animate-scale-in w-full sm:max-w-lg bg-white sm:rounded-2xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="flex-1 bg-muted flex items-center justify-center min-h-[400px]">
|
||||
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="max-h-[85vh] w-full object-contain" />
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b shrink-0">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="text-xs bg-[#2aabee] text-white">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-[15px] font-semibold">@{cat.username}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{isOwner && (
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1"
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
)}
|
||||
<button onClick={onClose} className="text-[#8e8e93] hover:text-black transition-colors p-1">
|
||||
<X className="h-5 w-5" strokeWidth={1.5} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="flex w-[340px] flex-col border-l">
|
||||
<div className="flex items-center justify-between px-5 py-3.5 border-b">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Avatar className="h-8 w-8 ring-2 ring-offset-1 ring-orange-200">
|
||||
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm font-semibold">@{cat.username}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{isOwner && (
|
||||
<button onClick={handleDelete} className="p-1.5 rounded-lg text-muted-foreground hover:text-destructive hover:bg-red-50 transition-colors">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
<button onClick={onClose} className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors">
|
||||
<X className="h-4.5 w-4.5" />
|
||||
</button>
|
||||
{/* Image */}
|
||||
<div className="bg-[#f0f0f0] flex items-center justify-center shrink-0">
|
||||
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="w-full max-h-[50vh] object-contain" />
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-3 space-y-2">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<Avatar className="h-7 w-7 shrink-0">
|
||||
<AvatarFallback className="text-[10px] bg-[#2aabee] text-white">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-[15px] leading-[1.3]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
{cat.caption || 'Без подписи'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto px-5 py-4">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200">
|
||||
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
{cat.caption || 'Без подписи'}
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
{new Date(cat.created_at).toLocaleDateString('ru-RU', {
|
||||
year: 'numeric', month: 'long', day: 'numeric',
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[12px] text-[#8e8e93]">
|
||||
{new Date(cat.created_at).toLocaleDateString('ru-RU', {
|
||||
year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="border-t px-5 py-3.5">
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<button
|
||||
onClick={handleLike}
|
||||
disabled={isOwner || !user}
|
||||
className={`like-btn ${animating ? 'heart-animate' : ''}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6 w-6 transition-all ${
|
||||
liked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
|
||||
}`}
|
||||
strokeWidth={liked ? 2.5 : 1.5}
|
||||
/>
|
||||
</button>
|
||||
<button className="hover:text-primary transition-colors">
|
||||
<MessageCircle className="h-6 w-6" strokeWidth={1.5} />
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-sm font-bold">{likeCount.toLocaleString('ru-RU')} отметок «Нравится»</span>
|
||||
<p className="text-xs text-muted-foreground mt-1">🏆 {cat.user_points} баллов</p>
|
||||
{/* Actions */}
|
||||
<div className="border-t px-4 py-3 shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={toggleLike}
|
||||
disabled={isOwner || !user}
|
||||
className={`flex items-center gap-1.5 text-[15px] font-medium transition-colors ${
|
||||
liked ? 'text-[#ff3b30]' : 'text-[#8e8e93] hover:text-black'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl leading-none">{liked ? '❤️' : '🤍'}</span>
|
||||
{likeCount > 0 && <span>{likeCount}</span>}
|
||||
</button>
|
||||
<span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points} баллов</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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, Cat } from 'lucide-react';
|
||||
import { Trophy } from 'lucide-react';
|
||||
|
||||
export default function FeedSidebar() {
|
||||
const { user } = useAuth();
|
||||
@@ -11,9 +11,8 @@ export default function FeedSidebar() {
|
||||
const usersMap = new Map<number, { username: string; points: number }>();
|
||||
if (data?.cats) {
|
||||
for (const cat of data.cats) {
|
||||
if (!usersMap.has(cat.user_id)) {
|
||||
if (!usersMap.has(cat.user_id))
|
||||
usersMap.set(cat.user_id, { username: cat.username, points: cat.user_points });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,54 +21,52 @@ export default function FeedSidebar() {
|
||||
.slice(0, 5);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-5">
|
||||
{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">
|
||||
<Avatar className="h-11 w-11">
|
||||
<AvatarFallback className="bg-[#2aabee] text-white text-sm font-semibold">
|
||||
{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>
|
||||
<p className="text-[15px] font-medium group-hover:text-[#2aabee] transition-colors">{user.username}</p>
|
||||
<p className="text-[12px] text-[#8e8e93]">🏆 {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 className="flex items-center gap-1.5 mb-3">
|
||||
<Trophy className="h-4 w-4 text-[#8e8e93]" strokeWidth={1.5} />
|
||||
<h3 className="text-[13px] font-semibold text-[#8e8e93] uppercase tracking-wider">Лидеры</h3>
|
||||
</div>
|
||||
|
||||
{topUsers.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Пока нет пользователей</p>
|
||||
<p className="text-[13px] text-[#8e8e93]">Пока нет пользователей</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2.5">
|
||||
{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'
|
||||
<span className={`w-5 text-center text-[13px] font-bold ${
|
||||
i === 0 ? 'text-[#2aabee]' : 'text-[#8e8e93]'
|
||||
}`}>{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">
|
||||
<AvatarFallback className="text-[10px] bg-[#2aabee] 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>
|
||||
<span className="text-[14px] flex-1 truncate font-medium group-hover:text-[#2aabee] transition-colors">
|
||||
{u.username}
|
||||
</span>
|
||||
<span className="text-[12px] font-medium text-[#8e8e93]">{u.points}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-4 text-xs text-muted-foreground/60 space-y-1">
|
||||
<div className="pt-2 text-[11px] text-[#8e8e93]/60 space-y-0.5">
|
||||
<p>Catstagram · Делись фото котов</p>
|
||||
<p>© 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,53 +1,47 @@
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { LogOut, Plus, Home, Cat } from 'lucide-react';
|
||||
|
||||
export default function Navbar() {
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur-md shadow-sm">
|
||||
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
|
||||
<Link to="/feed" className="flex items-center gap-2 group">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-sm transition-transform group-hover:scale-105">
|
||||
<Cat className="h-4.5 w-4.5 text-white" />
|
||||
</div>
|
||||
<span className="text-base font-bold tracking-tight text-foreground">
|
||||
Catstagram
|
||||
</span>
|
||||
<nav className="sticky top-0 z-50 border-b bg-white">
|
||||
<div className="mx-auto flex h-11 max-w-[660px] items-center justify-between px-4">
|
||||
<Link to="/feed" className="text-[17px] font-semibold tracking-tight">
|
||||
Catstagram
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-0.5">
|
||||
<Link to="/feed">
|
||||
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary">
|
||||
<Home className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Link
|
||||
to="/feed"
|
||||
className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors ${
|
||||
location.pathname === '/feed' ? 'bg-[#2aabee] text-white' : 'text-[#8e8e93] hover:text-black'
|
||||
}`}
|
||||
>
|
||||
<span className="text-base leading-none">🏠</span>
|
||||
<span className="hidden sm:inline">Лента</span>
|
||||
</Link>
|
||||
<Link to="/upload">
|
||||
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary">
|
||||
<Plus className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
<Link
|
||||
to="/upload"
|
||||
className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors ${
|
||||
location.pathname === '/upload' ? 'bg-[#2aabee] text-white' : 'text-[#8e8e93] hover:text-black'
|
||||
}`}
|
||||
>
|
||||
<span className="text-base leading-none">➕</span>
|
||||
<span className="hidden sm:inline">Добавить</span>
|
||||
</Link>
|
||||
<Link to="/profile">
|
||||
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl">
|
||||
<Avatar className="h-7 w-7">
|
||||
<AvatarFallback className="text-[10px] bg-gradient-to-br from-orange-400 to-rose-500 text-white">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
<Avatar className="h-7 w-7 ml-0.5">
|
||||
<AvatarFallback className="text-[9px] bg-[#2aabee] text-white">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => { logout(); navigate('/login'); }}
|
||||
className="flex h-9 w-9 items-center justify-center rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,17 +1,10 @@
|
||||
import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
type ToastType = 'success' | 'error' | 'info' | 'like';
|
||||
type ToastType = 'success' | 'error' | 'like';
|
||||
|
||||
interface ToastItem {
|
||||
id: number;
|
||||
message: string;
|
||||
type: ToastType;
|
||||
}
|
||||
interface ToastItem { id: number; message: string; type: ToastType; }
|
||||
|
||||
interface ToastContextType {
|
||||
toast: (message: string, type?: ToastType) => void;
|
||||
}
|
||||
interface ToastContextType { toast: (message: string, type?: ToastType) => void; }
|
||||
|
||||
const ToastContext = createContext<ToastContextType>(null!);
|
||||
let nextId = 0;
|
||||
@@ -19,10 +12,10 @@ let nextId = 0;
|
||||
export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
const [toasts, setToasts] = useState<ToastItem[]>([]);
|
||||
|
||||
const addToast = useCallback((message: string, type: ToastType = 'info') => {
|
||||
const addToast = useCallback((message: string, type: ToastType = 'success') => {
|
||||
const id = nextId++;
|
||||
setToasts((prev) => [...prev, { id, message, type }]);
|
||||
setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 2500);
|
||||
setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 2000);
|
||||
}, []);
|
||||
|
||||
const remove = (id: number) => setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
@@ -30,20 +23,13 @@ export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<ToastContext.Provider value={{ toast: addToast }}>
|
||||
{children}
|
||||
<div className="fixed bottom-5 right-5 z-[100] flex flex-col gap-2">
|
||||
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] flex flex-col items-center gap-2">
|
||||
{toasts.map((t) => (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`animate-slide-up flex items-center gap-2.5 rounded-xl px-4 py-2.5 text-sm font-medium shadow-lg backdrop-blur-sm ${
|
||||
t.type === 'error'
|
||||
? 'bg-destructive text-destructive-foreground'
|
||||
: 'bg-foreground/90 text-background'
|
||||
}`}
|
||||
className="animate-slide-up rounded-full px-5 py-2.5 text-[14px] font-medium shadow-lg bg-[#2aabee] text-white"
|
||||
>
|
||||
<span>{t.message}</span>
|
||||
<button onClick={() => remove(t.id)} className="opacity-60 hover:opacity-100 transition-opacity">
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -51,6 +37,4 @@ export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
return useContext(ToastContext);
|
||||
}
|
||||
export function useToast() { return useContext(ToastContext); }
|
||||
|
||||
@@ -1,134 +1,117 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "tailwindcss-animate";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: #faf7f3;
|
||||
--foreground: #1c1613;
|
||||
--background: #f5f5f5;
|
||||
--foreground: #000000;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #1c1613;
|
||||
--card-foreground: #000000;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #1c1613;
|
||||
--primary: #e85d3a;
|
||||
--popover-foreground: #000000;
|
||||
--primary: #2aabee;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #fff0eb;
|
||||
--secondary-foreground: #e85d3a;
|
||||
--muted: #f5f0ec;
|
||||
--muted-foreground: #8a7f75;
|
||||
--accent: #fceae3;
|
||||
--accent-foreground: #1c1613;
|
||||
--destructive: #e03e2f;
|
||||
--secondary: #eff2f5;
|
||||
--secondary-foreground: #000000;
|
||||
--muted: #f0f0f0;
|
||||
--muted-foreground: #8e8e93;
|
||||
--accent: #e8f5ff;
|
||||
--accent-foreground: #2aabee;
|
||||
--destructive: #ff3b30;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e8e0d8;
|
||||
--input: #e8e0d8;
|
||||
--ring: #e85d3a;
|
||||
--radius: 0.75rem;
|
||||
--border: #e5e5ea;
|
||||
--input: #e5e5ea;
|
||||
--ring: #2aabee;
|
||||
--radius: 0;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
|
||||
--shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
|
||||
--tg-blue: #2aabee;
|
||||
--tg-blue-light: #e8f5ff;
|
||||
--tg-separator: #e5e5ea;
|
||||
--tg-bg: #f5f5f5;
|
||||
--tg-bubble: #ffffff;
|
||||
--tg-muted: #8e8e93;
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: var(--border);
|
||||
}
|
||||
* { border-color: var(--tg-separator); }
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
background-color: var(--tg-bg);
|
||||
color: var(--foreground);
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #e85d3a;
|
||||
color: white;
|
||||
}
|
||||
::selection { background: var(--tg-blue); color: white; }
|
||||
|
||||
/* Heart animation */
|
||||
@keyframes heart-pop {
|
||||
0% { transform: scale(1); }
|
||||
25% { transform: scale(1.3); }
|
||||
50% { transform: scale(0.9); }
|
||||
75% { transform: scale(1.1); }
|
||||
40% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.heart-animate {
|
||||
animation: heart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* Double tap heart */
|
||||
@keyframes heart-burst {
|
||||
0% { transform: scale(0) rotate(-12deg); opacity: 1; }
|
||||
55% { transform: scale(1.2) rotate(3deg); opacity: 0.8; }
|
||||
100% { transform: scale(1.6) rotate(0deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.heart-burst {
|
||||
animation: heart-burst 0.5s ease-out forwards;
|
||||
}
|
||||
.heart-animate { animation: heart-pop 0.3s ease-out; }
|
||||
|
||||
/* Fade in */
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.35s ease-out;
|
||||
}
|
||||
.animate-fade-in { animation: fade-in 0.25s ease-out; }
|
||||
|
||||
/* Scale in */
|
||||
@keyframes scale-in {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
from { opacity: 0; transform: scale(0.97); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.animate-scale-in { animation: scale-in 0.15s ease-out; }
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* Slide up */
|
||||
/* Slide up for toasts */
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.25s ease-out;
|
||||
}
|
||||
.animate-slide-up { animation: slide-up 0.2s ease-out; }
|
||||
|
||||
/* Shimmer */
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
.skeleton-shimmer {
|
||||
background: linear-gradient(90deg, #f0e8e2 25%, #faf7f3 50%, #f0e8e2 75%);
|
||||
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Page transition */
|
||||
.page-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.page-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 0.18s ease-out;
|
||||
.page-enter { opacity: 0; }
|
||||
.page-enter-active { opacity: 1; transition: opacity 0.12s ease-out; }
|
||||
|
||||
/* Like button */
|
||||
.like-btn { transition: transform 0.08s; cursor: pointer; }
|
||||
.like-btn:active { transform: scale(0.82); }
|
||||
|
||||
/* Telegram-style avatar ring */
|
||||
.tg-avatar {
|
||||
border-radius: 50%;
|
||||
background: var(--tg-blue);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Like button press */
|
||||
.like-btn {
|
||||
transition: transform 0.1s;
|
||||
cursor: pointer;
|
||||
/* Telegram-style bubble */
|
||||
.tg-bubble {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.like-btn:active {
|
||||
transform: scale(0.8);
|
||||
|
||||
/* Telegram-style separator */
|
||||
.tg-divider {
|
||||
height: 1px;
|
||||
background: var(--tg-separator);
|
||||
}
|
||||
|
||||
/* Scrollbar hide */
|
||||
|
||||
@@ -7,7 +7,7 @@ import { useToast } from '@/components/Toast';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Heart, ArrowLeft, Trash2, MessageCircle } from 'lucide-react';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
|
||||
export default function CatPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
@@ -23,30 +23,24 @@ export default function CatPage() {
|
||||
const deleteMutation = useDeleteCat();
|
||||
|
||||
const [liked, setLiked] = useState(false);
|
||||
const [animating, setAnimating] = useState(false);
|
||||
|
||||
const cat = data?.cat;
|
||||
const isOwner = cat && user && cat.user_id === user.id;
|
||||
const isLiked = likeData?.liked ?? false;
|
||||
|
||||
useEffect(() => { setLiked(isLiked); }, [isLiked]);
|
||||
|
||||
const handleLike = async () => {
|
||||
const toggleLike = async () => {
|
||||
if (isOwner || !user || !cat) return;
|
||||
setAnimating(true);
|
||||
setTimeout(() => setAnimating(false), 450);
|
||||
|
||||
if (isLiked) {
|
||||
setLiked(false);
|
||||
try {
|
||||
const res = await unlikeMutation.mutateAsync();
|
||||
if (res.ownerPoints !== undefined && cat.user_id === user.id)
|
||||
updateUser({ ...user, points: res.ownerPoints });
|
||||
if (res.ownerPoints !== undefined && cat.user_id === user.id) updateUser({ ...user, points: res.ownerPoints });
|
||||
refetchLike();
|
||||
} catch { setLiked(true); }
|
||||
} else {
|
||||
setLiked(true);
|
||||
toast('Нравится ♥', 'like');
|
||||
toast('Нравится', 'like');
|
||||
try { await likeMutation.mutateAsync(); refetchLike(); }
|
||||
catch { setLiked(false); }
|
||||
}
|
||||
@@ -56,19 +50,19 @@ export default function CatPage() {
|
||||
if (!isOwner || !cat) return;
|
||||
try {
|
||||
await deleteMutation.mutateAsync(cat.id);
|
||||
toast('Удалено', 'success');
|
||||
toast('Удалено');
|
||||
navigate('/feed');
|
||||
} catch { toast('Ошибка удаления', 'error'); }
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl px-4 py-8">
|
||||
<Skeleton className="mb-4 h-5 w-20 rounded-xl" />
|
||||
<div className="mx-auto max-w-[580px] px-4 py-8">
|
||||
<Skeleton className="mb-4 h-5 w-20 rounded-full" />
|
||||
<Skeleton className="aspect-[4/3] w-full rounded-2xl" />
|
||||
<div className="mt-4 space-y-2">
|
||||
<Skeleton className="h-5 w-32 rounded-xl" />
|
||||
<Skeleton className="h-4 w-48 rounded-xl" />
|
||||
<Skeleton className="h-5 w-32 rounded-full" />
|
||||
<Skeleton className="h-4 w-48 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -77,82 +71,76 @@ export default function CatPage() {
|
||||
if (isError || !cat) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<p className="text-muted-foreground mb-4">Кот не найден</p>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
|
||||
<p className="text-[15px] text-[#8e8e93] mb-4">Кот не найден</p>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl px-4 py-8 animate-fade-in">
|
||||
<div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in">
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="mb-4 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
Назад
|
||||
</button>
|
||||
|
||||
<div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden">
|
||||
<div className="bg-muted/30">
|
||||
<div className="tg-bubble border shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
|
||||
<div className="bg-[#f0f0f0]">
|
||||
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="w-full max-h-[60vh] object-contain mx-auto" />
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-3">
|
||||
<div className="p-4 space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-9 w-9 ring-2 ring-offset-1 ring-orange-200">
|
||||
<AvatarFallback className="text-sm bg-gradient-to-br from-orange-400 to-rose-500 text-white font-bold">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarFallback className="text-sm bg-[#2aabee] text-white font-semibold">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<span className="text-sm font-bold">@{cat.username}</span>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="text-[15px] font-semibold">@{cat.username}</span>
|
||||
<p className="text-[12px] text-[#8e8e93]">
|
||||
{new Date(cat.created_at).toLocaleDateString('ru-RU', {
|
||||
year: 'numeric', month: 'long', day: 'numeric',
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{isOwner && (
|
||||
<button onClick={handleDelete} className="p-2 rounded-xl text-muted-foreground hover:text-destructive hover:bg-red-50 transition-colors">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<button onClick={handleDelete} className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1">
|
||||
Удалить
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-4 border-t pt-3">
|
||||
<button
|
||||
onClick={handleLike}
|
||||
disabled={isOwner || !user}
|
||||
className={`like-btn ${animating ? 'heart-animate' : ''}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6 w-6 transition-all ${
|
||||
isLiked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
|
||||
}`}
|
||||
strokeWidth={isLiked ? 2.5 : 1.5}
|
||||
/>
|
||||
</button>
|
||||
<button className="hover:text-primary transition-colors">
|
||||
<MessageCircle className="h-6 w-6" strokeWidth={1.5} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span className="text-sm font-bold block">{cat.likes_count.toLocaleString('ru-RU')} отметок «Нравится»</span>
|
||||
|
||||
{/* Caption */}
|
||||
{cat.caption && (
|
||||
<p className="text-sm">
|
||||
<span className="font-bold mr-1.5">@{cat.username}</span>
|
||||
<p className="text-[15px] leading-[1.3]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
{cat.caption}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground">🏆 {cat.user_points} баллов</p>
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<button
|
||||
onClick={toggleLike}
|
||||
disabled={isOwner || !user}
|
||||
className={`flex items-center gap-1.5 text-[15px] font-medium transition-colors ${
|
||||
isLiked ? 'text-[#ff3b30]' : 'text-[#8e8e93] hover:text-black'
|
||||
}`}
|
||||
>
|
||||
<span className={`text-xl leading-none ${isLiked ? 'heart-animate' : ''}`}>
|
||||
{isLiked ? '❤️' : '🤍'}
|
||||
</span>
|
||||
{cat.likes_count > 0 && <span>{cat.likes_count}</span>}
|
||||
</button>
|
||||
<span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points} баллов</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,25 +3,24 @@ import { useCats } from '@/hooks/useCats';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import CatCard from '@/components/CatCard';
|
||||
import FeedSidebar from '@/components/FeedSidebar';
|
||||
import StoryCircle from '@/components/StoryCircle';
|
||||
import CatModal from '@/components/CatModal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { ChevronLeft, ChevronRight, Cat } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
function FeedSkeleton() {
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-2xl p-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="space-y-2.5">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="tg-bubble border">
|
||||
<div className="flex items-center gap-2.5 px-3.5 py-2.5">
|
||||
<Skeleton className="h-8 w-8 rounded-full" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-24 rounded" />
|
||||
</div>
|
||||
<Skeleton className="aspect-[4/3] w-full rounded-xl" />
|
||||
<div className="mt-3 space-y-2">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="aspect-[4/3] w-full" />
|
||||
<div className="p-3 space-y-1.5">
|
||||
<Skeleton className="h-4 w-32 rounded" />
|
||||
<Skeleton className="h-4 w-20 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -33,45 +32,28 @@ export default function FeedPage() {
|
||||
const [page, setPage] = useState(1);
|
||||
const [modalCatId, setModalCatId] = useState<number | null>(null);
|
||||
const { data, isLoading, isError } = useCats(page);
|
||||
const { user } = useAuth();
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-5xl px-4 py-6">
|
||||
<div className="flex gap-10">
|
||||
{/* Main feed */}
|
||||
<div className="flex-1 max-w-[500px] mx-auto lg:mx-0">
|
||||
{/* Stories */}
|
||||
<div className="bg-white rounded-2xl border border-border/60 shadow-sm px-4 py-3.5 mb-5 overflow-hidden">
|
||||
<div className="flex gap-4 overflow-x-auto scrollbar-none">
|
||||
{user && <StoryCircle user={user} />}
|
||||
{data?.cats
|
||||
.filter((c, i, arr) => arr.findIndex((x) => x.user_id === c.user_id) === i)
|
||||
.slice(0, 7)
|
||||
.map((c) => (
|
||||
<StoryCircle
|
||||
key={c.user_id}
|
||||
user={{ id: c.user_id, username: c.username, points: c.user_points }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-[660px] px-4 py-4">
|
||||
<div className="flex gap-6">
|
||||
{/* Feed */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{isLoading && <FeedSkeleton />}
|
||||
|
||||
{isError && (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<Cat className="mb-4 h-12 w-12 text-muted-foreground/40" />
|
||||
<p className="text-muted-foreground mb-4">Не удалось загрузить котов</p>
|
||||
<Button variant="outline" onClick={() => setPage(1)}>Попробовать снова</Button>
|
||||
<p className="text-[15px] text-[#8e8e93] mb-4">Не удалось загрузить котов</p>
|
||||
<Button variant="outline" onClick={() => setPage(1)} className="rounded-full text-[13px]">Попробовать снова</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data && data.cats.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center bg-white rounded-2xl border border-border/60 shadow-sm">
|
||||
<Cat className="mb-4 h-16 w-16 text-muted-foreground/20" />
|
||||
<h2 className="text-lg font-semibold mb-1">Пока нет котов</h2>
|
||||
<p className="text-sm text-muted-foreground mb-5">Будьте первым, кто загрузит фото кота</p>
|
||||
<Button onClick={() => window.location.href = '/upload'}>Загрузить кота</Button>
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<p className="text-[17px] font-semibold mb-1">Пока нет котов</p>
|
||||
<p className="text-[14px] text-[#8e8e93] mb-5">Будьте первым, кто загрузит фото кота</p>
|
||||
<Button onClick={() => window.location.href = '/upload'} className="rounded-full text-[13px] bg-[#2aabee] hover:bg-[#1d9bd9]">
|
||||
Загрузить кота
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -82,15 +64,15 @@ export default function FeedPage() {
|
||||
))}
|
||||
|
||||
{data.totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-4 mt-6 pb-6">
|
||||
<Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1} className="rounded-xl">
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<div className="flex items-center justify-center gap-4 mt-4 pb-4">
|
||||
<Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1} className="rounded-full text-[13px] h-8">
|
||||
<ChevronLeft className="h-3.5 w-3.5" />
|
||||
Назад
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">{data.page} из {data.totalPages}</span>
|
||||
<Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages} className="rounded-xl">
|
||||
<span className="text-[13px] text-[#8e8e93]">{data.page} из {data.totalPages}</span>
|
||||
<Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages} className="rounded-full text-[13px] h-8">
|
||||
Вперёд
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
@@ -98,9 +80,9 @@ export default function FeedPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="hidden lg:block w-[280px] shrink-0">
|
||||
<div className="sticky top-20 bg-white rounded-2xl border border-border/60 shadow-sm p-5">
|
||||
{/* Sidebar — hidden on mobile */}
|
||||
<div className="hidden lg:block w-[220px] shrink-0">
|
||||
<div className="sticky top-16">
|
||||
<FeedSidebar />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,63 +22,53 @@ export default function LoginPage() {
|
||||
await login(username, password);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.error || 'Ошибка входа');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} finally { setLoading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-orange-50 via-amber-50 to-rose-50 p-4">
|
||||
<div className="flex min-h-screen items-center justify-center p-4 bg-[#f5f5f5]">
|
||||
<div className="w-full max-w-sm animate-fade-in">
|
||||
<div className="text-center mb-8">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-lg shadow-orange-200/50">
|
||||
<Cat className="h-8 w-8 text-white" />
|
||||
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
|
||||
<Cat className="h-7 w-7 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent">
|
||||
Catstagram
|
||||
</h1>
|
||||
<p className="mt-1.5 text-sm text-muted-foreground">Войдите, чтобы смотреть котов</p>
|
||||
<h1 className="text-[24px] font-bold">Catstagram</h1>
|
||||
<p className="text-[14px] text-[#8e8e93] mt-1">Войдите, чтобы смотреть котов</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-3.5">
|
||||
<Input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Имя пользователя"
|
||||
required
|
||||
autoFocus
|
||||
className="h-11 text-sm rounded-xl bg-secondary/50"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Пароль"
|
||||
required
|
||||
className="h-11 text-sm rounded-xl bg-secondary/50"
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Вход...' : 'Войти'}
|
||||
</Button>
|
||||
</form>
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Имя пользователя"
|
||||
required
|
||||
autoFocus
|
||||
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Пароль"
|
||||
required
|
||||
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
|
||||
/>
|
||||
{error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Вход...' : 'Войти'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Нет аккаунта?{' '}
|
||||
<Link to="/register" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-6 text-center text-[14px] text-[#8e8e93]">
|
||||
Нет аккаунта?{' '}
|
||||
<Link to="/register" className="font-medium text-[#2aabee] hover:underline">
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -6,7 +6,7 @@ import CatModal from '@/components/CatModal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Heart, Plus, ArrowLeft, Grid3X3, Bookmark } from 'lucide-react';
|
||||
import { ArrowLeft, Plus, Heart } from 'lucide-react';
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { id: paramId } = useParams<{ id?: string }>();
|
||||
@@ -27,16 +27,16 @@ export default function ProfilePage() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-10">
|
||||
<div className="flex items-center gap-6 mb-10">
|
||||
<div className="mx-auto max-w-[660px] px-4 py-8">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Skeleton className="h-16 w-16 rounded-full" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<div className="flex gap-4"><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /></div>
|
||||
<Skeleton className="h-5 w-32 rounded" />
|
||||
<Skeleton className="h-4 w-40 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-1">
|
||||
{Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-xl" />))}
|
||||
{Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-lg" />))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -45,8 +45,8 @@ export default function ProfilePage() {
|
||||
if (!profileUser && !isMe) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<p className="text-muted-foreground mb-4">Пользователь не найден</p>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
|
||||
<p className="text-[15px] text-[#8e8e93] mb-4">Пользователь не найден</p>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -55,89 +55,68 @@ export default function ProfilePage() {
|
||||
const initials = profileUser?.username?.charAt(0).toUpperCase() || '?';
|
||||
const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
|
||||
|
||||
const declension = (n: number, forms: [string, string, string]) => {
|
||||
n = Math.abs(n) % 100;
|
||||
const n1 = n % 10;
|
||||
if (n > 10 && n < 20) return forms[2];
|
||||
if (n1 > 1 && n1 < 5) return forms[1];
|
||||
if (n1 === 1) return forms[0];
|
||||
return forms[2];
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-10">
|
||||
<div className="mx-auto max-w-[660px] px-4 py-8">
|
||||
{!isMe && (
|
||||
<button onClick={() => navigate(-1)} className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
<button onClick={() => navigate(-1)} className="mb-5 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors">
|
||||
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
Назад
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Profile header */}
|
||||
<div className="flex items-start gap-8 mb-10">
|
||||
<Avatar className="h-20 w-20 shrink-0 ring-2 ring-offset-2 ring-orange-200">
|
||||
<AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-orange-400 to-rose-500 text-white">
|
||||
<div className="flex items-center gap-5 mb-8">
|
||||
<Avatar className="h-16 w-16 shrink-0">
|
||||
<AvatarFallback className="text-xl font-semibold bg-[#2aabee] text-white">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<h1 className="text-xl font-semibold">@{profileUser?.username}</h1>
|
||||
<div className="flex items-center gap-3 mb-1.5">
|
||||
<h1 className="text-[18px] font-semibold">@{profileUser?.username}</h1>
|
||||
{isMe && (
|
||||
<Button variant="outline" size="sm" className="rounded-xl text-xs h-8">
|
||||
Редактировать профиль
|
||||
<Button variant="outline" size="sm" className="rounded-full text-[12px] h-7 px-3">
|
||||
Редактировать
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm mb-4">
|
||||
<div className="flex items-center gap-4 text-[14px]">
|
||||
<div>
|
||||
<span className="font-bold">{cats.length}</span>{' '}
|
||||
<span className="text-muted-foreground">{declension(cats.length, ['публикация', 'публикации', 'публикаций'])}</span>
|
||||
<span className="font-semibold">{cats.length}</span>{' '}
|
||||
<span className="text-[#8e8e93]">публикаций</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-bold">{totalLikes}</span>{' '}
|
||||
<span className="text-muted-foreground">{declension(totalLikes, ['лайк', 'лайка', 'лайков'])}</span>
|
||||
<span className="font-semibold">{totalLikes}</span>{' '}
|
||||
<span className="text-[#8e8e93]">лайков</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-bold">🏆 {profileUser?.points ?? 0}</span>{' '}
|
||||
<span className="text-muted-foreground">{declension(profileUser?.points ?? 0, ['балл', 'балла', 'баллов'])}</span>
|
||||
<span className="font-semibold">🏆{profileUser?.points ?? 0}</span>{' '}
|
||||
<span className="text-[#8e8e93]">баллов</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isMe && (
|
||||
<Link to="/upload">
|
||||
<Button size="sm" className="rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm gap-1">
|
||||
<Plus className="h-4 w-4" />
|
||||
Новая публикация
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="mt-3">
|
||||
<Link to="/upload">
|
||||
<Button size="sm" className="rounded-full text-[13px] h-8 bg-[#2aabee] hover:bg-[#1d9bd9] gap-1">
|
||||
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
Новая публикация
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex items-center gap-6 border-t pt-4 mb-1">
|
||||
<button className="flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase text-foreground">
|
||||
<Grid3X3 className="h-3 w-3" />
|
||||
Публикации
|
||||
</button>
|
||||
<button className="flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">
|
||||
<Bookmark className="h-3 w-3" />
|
||||
Сохранённое
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{cats.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center border-t">
|
||||
<p className="text-base font-medium mb-1">Пока нет котов</p>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<p className="text-[15px] font-medium mb-1">Пока нет котов</p>
|
||||
<p className="text-[13px] text-[#8e8e93] mb-4">
|
||||
{isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
|
||||
</p>
|
||||
{isMe && (
|
||||
<Link to="/upload">
|
||||
<Button size="sm" className="rounded-xl">Загрузить кота</Button>
|
||||
<Button size="sm" className="rounded-full text-[13px] bg-[#2aabee] hover:bg-[#1d9bd9]">Загрузить кота</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
@@ -147,11 +126,11 @@ export default function ProfilePage() {
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setModalCatId(cat.id)}
|
||||
className="group relative aspect-square overflow-hidden rounded-xl bg-muted"
|
||||
className="group relative aspect-square overflow-hidden bg-[#f0f0f0]"
|
||||
>
|
||||
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy" />
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl">
|
||||
<div className="flex items-center gap-1.5 text-white text-sm font-bold">
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="flex items-center gap-1 text-white text-[13px] font-semibold drop-shadow-lg">
|
||||
<Heart className="h-4 w-4 fill-white" strokeWidth={2} />
|
||||
<span>{cat.likes_count}</span>
|
||||
</div>
|
||||
|
||||
@@ -29,73 +29,63 @@ export default function RegisterPage() {
|
||||
await register(username, password);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.error || 'Ошибка регистрации');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} finally { setLoading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-orange-50 via-amber-50 to-rose-50 p-4">
|
||||
<div className="flex min-h-screen items-center justify-center p-4 bg-[#f5f5f5]">
|
||||
<div className="w-full max-w-sm animate-fade-in">
|
||||
<div className="text-center mb-8">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-lg shadow-orange-200/50">
|
||||
<Cat className="h-8 w-8 text-white" />
|
||||
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
|
||||
<Cat className="h-7 w-7 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent">
|
||||
Catstagram
|
||||
</h1>
|
||||
<p className="mt-1.5 text-sm text-muted-foreground">Присоединяйтесь к сообществу котоводов</p>
|
||||
<h1 className="text-[24px] font-bold">Catstagram</h1>
|
||||
<p className="text-[14px] text-[#8e8e93] mt-1">Присоединяйтесь к сообществу</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-3.5">
|
||||
<Input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Имя пользователя"
|
||||
minLength={3}
|
||||
required
|
||||
autoFocus
|
||||
className="h-11 text-sm rounded-xl bg-secondary/50"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Пароль"
|
||||
minLength={4}
|
||||
required
|
||||
className="h-11 text-sm rounded-xl bg-secondary/50"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
placeholder="Подтвердите пароль"
|
||||
required
|
||||
className="h-11 text-sm rounded-xl bg-secondary/50"
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Создание аккаунта...' : 'Создать аккаунт'}
|
||||
</Button>
|
||||
</form>
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Имя пользователя"
|
||||
minLength={3}
|
||||
required
|
||||
autoFocus
|
||||
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Пароль"
|
||||
minLength={4}
|
||||
required
|
||||
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
placeholder="Подтвердите пароль"
|
||||
required
|
||||
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
|
||||
/>
|
||||
{error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Создание...' : 'Создать аккаунт'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link to="/login" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
|
||||
Войти
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-6 text-center text-[14px] text-[#8e8e93]">
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link to="/login" className="font-medium text-[#2aabee] hover:underline">
|
||||
Войти
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { ArrowLeft, Upload, X, ImageIcon } from 'lucide-react';
|
||||
import { ArrowLeft, Upload, X } from 'lucide-react';
|
||||
|
||||
export default function UploadPage() {
|
||||
const navigate = useNavigate();
|
||||
@@ -42,11 +42,9 @@ export default function UploadPage() {
|
||||
try {
|
||||
const result = await uploadMutation.mutateAsync(fd);
|
||||
if (user) updateUser({ ...user, points: (user.points || 0) + 10 });
|
||||
toast('+10 баллов! 🎉', 'success');
|
||||
toast('+10 баллов');
|
||||
navigate(`/cat/${result.cat.id}`);
|
||||
} catch {
|
||||
toast('Ошибка загрузки', 'error');
|
||||
}
|
||||
} catch { toast('Ошибка загрузки', 'error'); }
|
||||
};
|
||||
|
||||
const clearFile = () => {
|
||||
@@ -56,100 +54,83 @@ export default function UploadPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-xl px-4 py-6">
|
||||
<div className="mx-auto max-w-[580px] px-4 py-6">
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="mb-4 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
Назад
|
||||
</button>
|
||||
|
||||
<div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden">
|
||||
<div className="px-5 py-3.5 border-b">
|
||||
<h1 className="text-base font-semibold text-center">Новый пост</h1>
|
||||
<h1 className="text-[20px] font-semibold mb-5">Новая публикация</h1>
|
||||
|
||||
{!preview ? (
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`border border-dashed rounded-2xl p-16 text-center cursor-pointer transition-colors ${
|
||||
isDragActive ? 'border-[#2aabee] bg-[#e8f5ff]' : 'hover:bg-[#f0f0f0] border-[#d1d1d6]'
|
||||
}`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<div className="mb-4">
|
||||
<Upload className="mx-auto h-8 w-8 text-[#8e8e93]" strokeWidth={1.5} />
|
||||
</div>
|
||||
<p className="text-[15px] font-medium mb-1">
|
||||
{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
|
||||
</p>
|
||||
<p className="text-[13px] text-[#8e8e93] mb-5">или нажмите, чтобы выбрать</p>
|
||||
<Button variant="outline" size="sm" className="rounded-full text-[13px]">Выбрать файл</Button>
|
||||
<p className="mt-4 text-[12px] text-[#8e8e93]">JPG, PNG, GIF, WebP · до 10 МБ</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="relative bg-[#f0f0f0] rounded-2xl overflow-hidden">
|
||||
<img src={preview} alt="Preview" className="max-h-[400px] w-full object-contain" />
|
||||
<button
|
||||
onClick={clearFile}
|
||||
className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!preview ? (
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`flex cursor-pointer flex-col items-center justify-center p-16 text-center transition-all ${
|
||||
isDragActive
|
||||
? 'bg-gradient-to-br from-orange-50 to-rose-50 border-2 border-dashed border-orange-300 m-2 rounded-xl'
|
||||
: 'hover:bg-secondary/50'
|
||||
}`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<div className="mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-secondary">
|
||||
<Upload className={`h-8 w-8 ${isDragActive ? 'text-orange-500' : 'text-muted-foreground'}`} strokeWidth={1.5} />
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar className="h-8 w-8 shrink-0">
|
||||
<AvatarFallback className="text-xs bg-[#2aabee] text-white">
|
||||
{user?.username?.charAt(0).toUpperCase() || '?'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<p className="text-[13px] font-medium mb-1">{user?.username}</p>
|
||||
<textarea
|
||||
placeholder="Подпись к фото..."
|
||||
value={caption}
|
||||
onChange={(e) => setCaption(e.target.value)}
|
||||
maxLength={200}
|
||||
rows={2}
|
||||
className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[#8e8e93]"
|
||||
/>
|
||||
<p className="text-right text-[11px] text-[#8e8e93] mt-0.5">{caption.length}/200</p>
|
||||
</div>
|
||||
<p className="text-base font-medium mb-1">
|
||||
{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mb-5">или нажмите, чтобы выбрать</p>
|
||||
<Button variant="outline" size="sm" className="rounded-xl">
|
||||
Выбрать файл
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<span className="text-[13px] text-[#8e8e93]">+10 баллов</span>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={uploadMutation.isPending}
|
||||
size="sm"
|
||||
className="rounded-full text-[14px] bg-[#2aabee] hover:bg-[#1d9bd9] px-6"
|
||||
>
|
||||
{uploadMutation.isPending ? 'Публикация...' : 'Опубликовать'}
|
||||
</Button>
|
||||
<p className="mt-4 text-xs text-muted-foreground">JPG, PNG, GIF, WebP · до 10 МБ</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="relative bg-muted flex items-center justify-center max-h-96 overflow-hidden">
|
||||
<img src={preview} alt="Preview" className="max-h-96 w-full object-contain" />
|
||||
<button
|
||||
onClick={clearFile}
|
||||
className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-xl bg-black/50 text-white hover:bg-black/70 transition-colors"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 px-4 py-3">
|
||||
<Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200">
|
||||
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
|
||||
{user?.username?.charAt(0).toUpperCase() || '?'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs font-semibold mb-1">{user?.username}</p>
|
||||
<textarea
|
||||
placeholder="Напишите подпись..."
|
||||
value={caption}
|
||||
onChange={(e) => setCaption(e.target.value)}
|
||||
maxLength={200}
|
||||
rows={2}
|
||||
className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
<p className="text-right text-xs text-muted-foreground mt-1">{caption.length}/200</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-orange-50 to-rose-50 border-t">
|
||||
<span className="text-sm font-medium text-orange-600">+10 баллов за загрузку</span>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={uploadMutation.isPending}
|
||||
size="sm"
|
||||
className="rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
|
||||
>
|
||||
{uploadMutation.isPending ? 'Публикация...' : 'Поделиться'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{preview && (
|
||||
<div className="mt-4 flex justify-center">
|
||||
<Button variant="ghost" size="sm" onClick={clearFile} className="text-muted-foreground rounded-xl">
|
||||
<ImageIcon className="h-4 w-4 mr-1.5" />
|
||||
Выбрать другое фото
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploadMutation.isError && (
|
||||
<p className="mt-3 text-center text-sm text-destructive">Не удалось загрузить. Попробуйте снова.</p>
|
||||
<p className="mt-3 text-center text-[13px] text-[#ff3b30]">Не удалось загрузить. Попробуйте снова.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user