UI: полноценный красивый интерфейс, iOS-style дизайн, все страницы
This commit is contained in:
@@ -4,6 +4,7 @@ import { useAuth } from '@/hooks/useAuth';
|
||||
import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Heart, MessageCircle } from 'lucide-react';
|
||||
|
||||
interface CatCardProps {
|
||||
cat: Cat;
|
||||
@@ -33,90 +34,99 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
|
||||
} else {
|
||||
setLiked(true);
|
||||
setLikeCount((c) => c + 1);
|
||||
toast('Нравится', 'like');
|
||||
toast('Нравится ❤️');
|
||||
try { await likeMutation.mutateAsync(); }
|
||||
catch { setLiked(false); setLikeCount((c) => c - 1); }
|
||||
}
|
||||
};
|
||||
|
||||
const timeAgo = new Date(cat.created_at).toLocaleDateString('ru-RU', {
|
||||
day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit',
|
||||
});
|
||||
|
||||
return (
|
||||
<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)]">
|
||||
<article className="animate-fade-in-up mb-4 last:mb-0">
|
||||
<div className="card overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-3.5 py-2.5">
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<div
|
||||
className="flex items-center gap-2.5 cursor-pointer"
|
||||
className="flex items-center gap-3 cursor-pointer group"
|
||||
onClick={() => onOpen(cat.id)}
|
||||
>
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="text-xs bg-[#2aabee] text-white">
|
||||
<Avatar className="h-10 w-10">
|
||||
<AvatarFallback className="text-sm avatar-initials">
|
||||
{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>
|
||||
<h3 className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">
|
||||
@{cat.username}
|
||||
</h3>
|
||||
<time className="text-[11px] text-[var(--foreground-tertiary)]">{timeAgo}</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<div
|
||||
className="cursor-pointer bg-[#f0f0f0]"
|
||||
<figure
|
||||
className="cursor-pointer bg-[var(--secondary)] img-loading"
|
||||
onClick={() => onOpen(cat.id)}
|
||||
>
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
className="w-full max-h-[460px] object-contain select-none"
|
||||
className="w-full max-h-[500px] object-contain select-none mx-auto transition-opacity"
|
||||
draggable={false}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
{/* Caption */}
|
||||
{cat.caption && (
|
||||
<div className="px-3.5 pt-2.5" onClick={() => onOpen(cat.id)}>
|
||||
<span className="text-[15px] leading-[1.3]">
|
||||
<div className="px-4 pt-3 pb-1 cursor-pointer" onClick={() => onOpen(cat.id)}>
|
||||
<p className="text-[15px] leading-[1.4]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
{cat.caption}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions row */}
|
||||
<div className="flex items-center justify-between px-3.5 py-2.5">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<div className="flex items-center gap-5">
|
||||
<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'
|
||||
className={`btn-icon flex items-center gap-1.5 text-[14px] font-medium ${
|
||||
isOwner
|
||||
? 'text-[var(--foreground-tertiary)] cursor-not-allowed'
|
||||
: liked
|
||||
? 'text-[var(--danger)]'
|
||||
: 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
|
||||
}`}
|
||||
>
|
||||
<span className={`text-base leading-none ${liked ? 'heart-animate' : ''}`}>
|
||||
{liked ? '❤️' : '🤍'}
|
||||
</span>
|
||||
{likeCount > 0 && <span>{likeCount}</span>}
|
||||
<Heart
|
||||
className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
|
||||
/>
|
||||
{likeCount > 0 && <span className="tabular-nums">{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"
|
||||
className="btn-icon flex items-center gap-1.5 text-[14px] font-medium text-[var(--foreground-secondary)] hover:text-[var(--foreground)]"
|
||||
>
|
||||
<span className="text-base leading-none">💬</span>
|
||||
<span>Комментарии</span>
|
||||
<MessageCircle className="h-5 w-5 stroke-[1.5]" />
|
||||
<span className="hidden sm:inline text-[13px]">Комментарии</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{cat.user_points > 0 && (
|
||||
<span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points}</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1 text-[12px] text-[var(--foreground-tertiary)]">
|
||||
<span>🏆</span>
|
||||
<span className="font-medium">{cat.user_points}</span>
|
||||
<span className="hidden sm:inline">баллов</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -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 { X } from 'lucide-react';
|
||||
import { X, Heart, Trash2 } from 'lucide-react';
|
||||
|
||||
interface CatModalProps {
|
||||
catId: number;
|
||||
@@ -22,10 +22,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
|
||||
const [liked, setLiked] = useState(false);
|
||||
const [likeCount, setLikeCount] = useState(0);
|
||||
const [imageLoaded, setImageLoaded] = useState(false);
|
||||
|
||||
useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]);
|
||||
useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]);
|
||||
useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, []);
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, []);
|
||||
|
||||
const cat = data?.cat;
|
||||
const isOwner = cat && user && cat.user_id === user.id;
|
||||
@@ -37,13 +41,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
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('Нравится ❤️');
|
||||
try { await likeMutation.mutateAsync(); refetchLike(); }
|
||||
catch { setLiked(false); setLikeCount((c) => c - 1); }
|
||||
}
|
||||
@@ -53,94 +58,132 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
if (!isOwner || !cat) return;
|
||||
try {
|
||||
await deleteMutation.mutateAsync(cat.id);
|
||||
toast('Удалено', 'success');
|
||||
toast('Удалено');
|
||||
onClose();
|
||||
} catch { toast('Ошибка удаления', 'error'); }
|
||||
};
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [onClose]);
|
||||
|
||||
if (isLoading || !cat) {
|
||||
return (
|
||||
<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 className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center" onClick={onClose}>
|
||||
<div className="flex items-center gap-3 px-6 py-4 bg-white rounded-full shadow-lg animate-scale-in">
|
||||
<div className="h-5 w-5 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" />
|
||||
<span className="text-[14px] font-medium text-[var(--foreground-secondary)]">Загрузка...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const dateStr = new Date(cat.created_at).toLocaleDateString('ru-RU', {
|
||||
year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] bg-black/60 flex items-end sm:items-center justify-center" onClick={onClose}>
|
||||
<div
|
||||
className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
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"
|
||||
className="w-full sm:max-w-xl bg-white sm:rounded-xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 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">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarFallback className="text-sm avatar-initials">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-[15px] font-semibold">@{cat.username}</span>
|
||||
<div>
|
||||
<span className="text-[15px] font-semibold">@{cat.username}</span>
|
||||
<p className="text-[11px] text-[var(--foreground-tertiary)]">{dateStr}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{isOwner && (
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1"
|
||||
className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"
|
||||
title="Удалить"
|
||||
>
|
||||
Удалить
|
||||
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
<button onClick={onClose} className="text-[#8e8e93] hover:text-black transition-colors p-1">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--foreground)] hover:bg-[var(--secondary)]"
|
||||
>
|
||||
<X className="h-5 w-5" strokeWidth={1.5} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 className="bg-[var(--secondary)] flex items-center justify-center shrink-0 relative">
|
||||
{!imageLoaded && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="h-8 w-8 rounded-full border-2 border-[var(--foreground-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
className={`w-full max-h-[55vh] object-contain transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||
onLoad={() => setImageLoaded(true)}
|
||||
/>
|
||||
</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">
|
||||
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar className="h-8 w-8 shrink-0 mt-0.5">
|
||||
<AvatarFallback className="text-[10px] avatar-initials">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-[15px] leading-[1.3]">
|
||||
<p className="text-[15px] leading-[1.4]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
{cat.caption || 'Без подписи'}
|
||||
</p>
|
||||
</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-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 className="border-t px-5 py-4 shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-5">
|
||||
<button
|
||||
onClick={toggleLike}
|
||||
disabled={isOwner || !user}
|
||||
className={`btn-icon flex items-center gap-1.5 text-[15px] font-medium ${
|
||||
isOwner
|
||||
? 'text-[var(--foreground-tertiary)] cursor-not-allowed'
|
||||
: liked
|
||||
? 'text-[var(--danger)]'
|
||||
: 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
|
||||
/>
|
||||
{likeCount > 0 && <span className="tabular-nums">{likeCount}</span>}
|
||||
</button>
|
||||
</div>
|
||||
<span className="flex items-center gap-1.5 text-[13px] text-[var(--foreground-secondary)]">
|
||||
<span>🏆</span>
|
||||
<span className="font-semibold">{cat.user_points}</span>
|
||||
<span>баллов</span>
|
||||
</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 } from 'lucide-react';
|
||||
import { Trophy, Sparkles } from 'lucide-react';
|
||||
|
||||
export default function FeedSidebar() {
|
||||
const { user } = useAuth();
|
||||
@@ -21,52 +21,86 @@ export default function FeedSidebar() {
|
||||
.slice(0, 5);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-6">
|
||||
{/* Current user */}
|
||||
{user && (
|
||||
<Link to="/profile" className="flex items-center gap-3 group">
|
||||
<Link
|
||||
to="/profile"
|
||||
className="card flex items-center gap-3 p-3 hover:shadow-md transition-all group"
|
||||
>
|
||||
<Avatar className="h-11 w-11">
|
||||
<AvatarFallback className="bg-[#2aabee] text-white text-sm font-semibold">
|
||||
<AvatarFallback className="text-sm font-semibold avatar-initials">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<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 className="min-w-0 flex-1">
|
||||
<p className="text-[14px] font-semibold truncate group-hover:text-[var(--primary)] transition-colors">
|
||||
{user.username}
|
||||
</p>
|
||||
<p className="text-[12px] text-[var(--foreground-secondary)]">
|
||||
🏆 {user.points} баллов
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<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>
|
||||
{/* Top users */}
|
||||
<div className="card p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Trophy className="h-4 w-4 text-amber-500" strokeWidth={1.5} />
|
||||
<h3 className="text-[12px] font-bold text-[var(--foreground-secondary)] uppercase tracking-widest">
|
||||
Лидеры
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{topUsers.length === 0 ? (
|
||||
<p className="text-[13px] text-[#8e8e93]">Пока нет пользователей</p>
|
||||
<p className="text-[13px] text-[var(--foreground-tertiary)] text-center py-4">
|
||||
Пока нет пользователей
|
||||
</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-3 group">
|
||||
<span className={`w-5 text-center text-[13px] font-bold ${
|
||||
i === 0 ? 'text-[#2aabee]' : 'text-[#8e8e93]'
|
||||
}`}>{i + 1}</span>
|
||||
<Link
|
||||
key={id}
|
||||
to={`/profile/${id}`}
|
||||
className="flex items-center gap-3 group"
|
||||
>
|
||||
<span
|
||||
className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold ${
|
||||
i === 0
|
||||
? 'bg-amber-100 text-amber-600'
|
||||
: i === 1
|
||||
? 'bg-gray-100 text-gray-500'
|
||||
: i === 2
|
||||
? 'bg-orange-100 text-orange-600'
|
||||
: 'text-[var(--foreground-tertiary)]'
|
||||
}`}
|
||||
>
|
||||
{i + 1}
|
||||
</span>
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="text-[10px] bg-[#2aabee] text-white">
|
||||
<AvatarFallback className="text-[10px] avatar-initials">
|
||||
{u.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-[14px] flex-1 truncate font-medium group-hover:text-[#2aabee] transition-colors">
|
||||
<span className="text-[14px] flex-1 truncate font-medium group-hover:text-[var(--primary)] transition-colors">
|
||||
{u.username}
|
||||
</span>
|
||||
<span className="text-[12px] font-medium text-[#8e8e93]">{u.points}</span>
|
||||
<span className="text-[12px] font-semibold text-[var(--foreground-secondary)] tabular-nums">
|
||||
{u.points}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-2 text-[11px] text-[#8e8e93]/60 space-y-0.5">
|
||||
<p>Catstagram · Делись фото котов</p>
|
||||
{/* Info */}
|
||||
<div className="px-1 text-[11px] text-[var(--foreground-tertiary)] space-y-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Sparkles className="h-3 w-3" strokeWidth={1.5} />
|
||||
<span>Catstagram · Сообщество котоводов</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,43 +1,53 @@
|
||||
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { House, Plus } from 'lucide-react';
|
||||
|
||||
export default function Navbar() {
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const location = useLocation();
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const navItems = [
|
||||
{ to: '/feed', label: 'Лента', icon: House },
|
||||
{ to: '/upload', label: 'Добавить', icon: Plus },
|
||||
];
|
||||
|
||||
return (
|
||||
<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">
|
||||
<nav className="sticky top-0 z-50 bg-[var(--surface)]/90 backdrop-blur-xl border-b border-[var(--border)]">
|
||||
<div className="mx-auto flex h-14 max-w-[660px] items-center justify-between px-4">
|
||||
<Link
|
||||
to="/feed"
|
||||
className="text-[18px] font-bold tracking-tight"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
|
||||
>
|
||||
Catstagram
|
||||
</Link>
|
||||
|
||||
<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"
|
||||
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">
|
||||
<Avatar className="h-7 w-7 ml-0.5">
|
||||
<AvatarFallback className="text-[9px] bg-[#2aabee] text-white">
|
||||
<div className="flex items-center gap-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location.pathname === item.to;
|
||||
return (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className={`flex items-center gap-1.5 px-3.5 py-2 rounded-full text-[13px] font-medium transition-all ${
|
||||
isActive
|
||||
? 'bg-[var(--primary-light)] text-[var(--primary)]'
|
||||
: 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)] hover:bg-[var(--secondary)]'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`h-4 w-4 ${isActive ? 'stroke-[2.5]' : 'stroke-[1.5]'}`} />
|
||||
<span className="hidden sm:inline">{item.label}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
<Link to="/profile" className="ml-1">
|
||||
<Avatar className="h-8 w-8 border-2 border-transparent hover:border-[var(--primary)] transition-all">
|
||||
<AvatarFallback className="text-[11px] avatar-initials">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
@@ -8,14 +8,14 @@ interface StoryCircleProps {
|
||||
export default function StoryCircle({ user }: StoryCircleProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-1.5 w-16 shrink-0 group cursor-pointer">
|
||||
<div className="rounded-full p-0.5 bg-gradient-to-br from-orange-400 to-rose-500">
|
||||
<Avatar className="h-13 w-13 border-2 border-white">
|
||||
<AvatarFallback className="bg-foreground text-background text-sm font-medium">
|
||||
<div className="rounded-full p-0.5" style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
|
||||
<Avatar className="h-14 w-14 border-2 border-white">
|
||||
<AvatarFallback className="text-sm font-semibold bg-white text-[var(--primary)]">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<span className="text-[11px] text-muted-foreground truncate w-full text-center group-hover:text-foreground transition-colors">
|
||||
<span className="text-[11px] text-[var(--foreground-tertiary)] truncate w-full text-center group-hover:text-[var(--foreground)] transition-colors">
|
||||
{user.username}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -18,18 +18,22 @@ export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 2000);
|
||||
}, []);
|
||||
|
||||
const remove = (id: number) => setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ toast: addToast }}>
|
||||
{children}
|
||||
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] flex flex-col items-center gap-2">
|
||||
<div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] flex flex-col items-center gap-2 pointer-events-none">
|
||||
{toasts.map((t) => (
|
||||
<div
|
||||
key={t.id}
|
||||
className="animate-slide-up rounded-full px-5 py-2.5 text-[14px] font-medium shadow-lg bg-[#2aabee] text-white"
|
||||
className="animate-toast-in rounded-full px-6 py-2.5 text-[14px] font-medium shadow-lg pointer-events-auto"
|
||||
style={{
|
||||
background: t.type === 'error'
|
||||
? 'var(--danger)'
|
||||
: 'linear-gradient(135deg, #007aff, #5856d6)',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<span>{t.message}</span>
|
||||
{t.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -2,118 +2,218 @@
|
||||
@plugin "tailwindcss-animate";
|
||||
|
||||
:root {
|
||||
--background: #f5f5f5;
|
||||
--foreground: #000000;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #000000;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #000000;
|
||||
--primary: #2aabee;
|
||||
--background: #f5f5f7;
|
||||
--surface: #ffffff;
|
||||
--surface-hover: #f8f8fa;
|
||||
--foreground: #1c1c1e;
|
||||
--foreground-secondary: #8a8a8e;
|
||||
--foreground-tertiary: #aeaeb2;
|
||||
--primary: #007aff;
|
||||
--primary-hover: #0066d6;
|
||||
--primary-light: #e8f2ff;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #eff2f5;
|
||||
--secondary-foreground: #000000;
|
||||
--muted: #f0f0f0;
|
||||
--muted-foreground: #8e8e93;
|
||||
--accent: #e8f5ff;
|
||||
--accent-foreground: #2aabee;
|
||||
--destructive: #ff3b30;
|
||||
--destructive-foreground: #ffffff;
|
||||
--secondary: #f2f2f5;
|
||||
--secondary-foreground: #1c1c1e;
|
||||
--border: #e5e5ea;
|
||||
--input: #e5e5ea;
|
||||
--ring: #2aabee;
|
||||
--radius: 0;
|
||||
|
||||
--tg-blue: #2aabee;
|
||||
--tg-blue-light: #e8f5ff;
|
||||
--tg-separator: #e5e5ea;
|
||||
--tg-bg: #f5f5f5;
|
||||
--tg-bubble: #ffffff;
|
||||
--tg-muted: #8e8e93;
|
||||
--border-light: #f0f0f3;
|
||||
--danger: #ff3b30;
|
||||
--danger-hover: #d6342b;
|
||||
--danger-light: #ffe8e6;
|
||||
--success: #34c759;
|
||||
--success-light: #e8f8ed;
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);
|
||||
--shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 20px;
|
||||
--radius-full: 9999px;
|
||||
}
|
||||
|
||||
* { border-color: var(--tg-separator); }
|
||||
* { border-color: var(--border); }
|
||||
|
||||
body {
|
||||
background-color: var(--tg-bg);
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
::selection { background: var(--tg-blue); color: white; }
|
||||
::selection { background: var(--primary); color: white; }
|
||||
|
||||
/* Heart animation */
|
||||
@keyframes heart-pop {
|
||||
0% { transform: scale(1); }
|
||||
40% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.heart-animate { animation: heart-pop 0.3s ease-out; }
|
||||
/* ── Animations ── */
|
||||
|
||||
/* Fade in */
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes fade-in-up {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in { animation: fade-in 0.25s ease-out; }
|
||||
|
||||
/* Scale in */
|
||||
@keyframes scale-in {
|
||||
from { opacity: 0; transform: scale(0.97); }
|
||||
from { opacity: 0; transform: scale(0.96); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.animate-scale-in { animation: scale-in 0.15s ease-out; }
|
||||
|
||||
/* Slide up for toasts */
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
from { opacity: 0; transform: translateY(100%); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-slide-up { animation: slide-up 0.2s ease-out; }
|
||||
|
||||
/* Shimmer */
|
||||
@keyframes heart-bounce {
|
||||
0% { transform: scale(1); }
|
||||
25% { transform: scale(1.3); }
|
||||
50% { transform: scale(0.95); }
|
||||
75% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
@keyframes spin-slow {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
.skeleton-shimmer {
|
||||
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.2s ease-in-out infinite;
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translateY(12px) scale(0.96); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
@keyframes toast-out {
|
||||
from { opacity: 1; transform: translateY(0) scale(1); }
|
||||
to { opacity: 0; transform: translateY(-8px) scale(0.96); }
|
||||
}
|
||||
|
||||
/* Page transition */
|
||||
.page-enter { opacity: 0; }
|
||||
.page-enter-active { opacity: 1; transition: opacity 0.12s ease-out; }
|
||||
.animate-fade-in { animation: fade-in 0.15s ease-out; }
|
||||
.animate-fade-in-up { animation: fade-in-up 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.animate-scale-in { animation: scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.animate-slide-up { animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.animate-heart { animation: heart-bounce 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.animate-spin-slow { animation: spin-slow 1s linear infinite; }
|
||||
.animate-toast-in { animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
|
||||
/* Like button */
|
||||
.like-btn { transition: transform 0.08s; cursor: pointer; }
|
||||
.like-btn:active { transform: scale(0.82); }
|
||||
/* ── Shared UI ── */
|
||||
|
||||
/* Telegram-style avatar ring */
|
||||
.tg-avatar {
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border);
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.avatar-initials {
|
||||
border-radius: 50%;
|
||||
background: var(--tg-blue);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: var(--primary);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Telegram-style bubble */
|
||||
.tg-bubble {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
.btn-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
transition: background 0.15s ease, transform 0.1s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
.btn-icon:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
/* Telegram-style separator */
|
||||
.tg-divider {
|
||||
height: 1px;
|
||||
background: var(--tg-separator);
|
||||
.link-blue {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.link-blue:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Scrollbar hide */
|
||||
.text-secondary { color: var(--foreground-secondary); }
|
||||
.text-tertiary { color: var(--foreground-tertiary); }
|
||||
|
||||
/* ── Utility ── */
|
||||
|
||||
.skeleton-shimmer {
|
||||
background: linear-gradient(90deg, #e8e8ec 25%, #f2f2f5 50%, #e8e8ec 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── Modal backdrop ── */
|
||||
|
||||
.backdrop-blur {
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* ── Button base ── */
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
.btn-primary:hover { background: var(--primary-hover); }
|
||||
.btn-primary:active { transform: scale(0.97); }
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-full);
|
||||
background: transparent;
|
||||
color: var(--foreground);
|
||||
border: 1px solid var(--border);
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-outline:hover { background: var(--secondary); border-color: var(--foreground-tertiary); }
|
||||
.btn-outline:active { transform: scale(0.97); }
|
||||
|
||||
/* ── Scrollbar ── */
|
||||
|
||||
.scrollbar-none::-webkit-scrollbar { display: none; }
|
||||
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
/* ── Image loading ── */
|
||||
|
||||
.img-loading {
|
||||
background: var(--secondary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-size: 200% 100%;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { useCat, useDeleteCat } from '@/hooks/useCats';
|
||||
import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
@@ -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 { ArrowLeft } from 'lucide-react';
|
||||
import { ArrowLeft, Heart, Trash2 } from 'lucide-react';
|
||||
|
||||
export default function CatPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
@@ -23,6 +23,7 @@ export default function CatPage() {
|
||||
const deleteMutation = useDeleteCat();
|
||||
|
||||
const [liked, setLiked] = useState(false);
|
||||
const [imageLoaded, setImageLoaded] = useState(false);
|
||||
const cat = data?.cat;
|
||||
const isOwner = cat && user && cat.user_id === user.id;
|
||||
const isLiked = likeData?.liked ?? false;
|
||||
@@ -35,12 +36,13 @@ export default function CatPage() {
|
||||
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('Нравится ❤️');
|
||||
try { await likeMutation.mutateAsync(); refetchLike(); }
|
||||
catch { setLiked(false); }
|
||||
}
|
||||
@@ -60,9 +62,10 @@ export default function CatPage() {
|
||||
<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">
|
||||
<div className="mt-5 space-y-3">
|
||||
<Skeleton className="h-5 w-32 rounded-full" />
|
||||
<Skeleton className="h-4 w-48 rounded-full" />
|
||||
<Skeleton className="h-4 w-24 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -70,76 +73,129 @@ export default function CatPage() {
|
||||
|
||||
if (isError || !cat) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<p className="text-[15px] text-[#8e8e93] mb-4">Кот не найден</p>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
|
||||
<div className="flex flex-col items-center justify-center py-24 animate-fade-in">
|
||||
<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]">
|
||||
<span className="text-2xl">🔍</span>
|
||||
</div>
|
||||
<p className="text-[17px] font-semibold mb-1.5">Кот не найден</p>
|
||||
<p className="text-[14px] text-[var(--foreground-secondary)] mb-6">
|
||||
Возможно, публикация была удалена
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate('/feed')}
|
||||
className="rounded-full text-[13px]"
|
||||
>
|
||||
Перейти в ленту
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const dateStr = new Date(cat.created_at).toLocaleDateString('ru-RU', {
|
||||
year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in">
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-4 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors"
|
||||
className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors group"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
<ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
|
||||
Назад
|
||||
</button>
|
||||
|
||||
<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 className="card overflow-hidden">
|
||||
{/* Image */}
|
||||
<div className="bg-[var(--secondary)] relative img-loading">
|
||||
{!imageLoaded && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="h-8 w-8 rounded-full border-2 border-[var(--foreground-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
className={`w-full max-h-[60vh] object-contain mx-auto transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||
onLoad={() => setImageLoaded(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-3">
|
||||
<div className="p-5 space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarFallback className="text-sm bg-[#2aabee] text-white font-semibold">
|
||||
<div className="flex items-start justify-between">
|
||||
<Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group">
|
||||
<Avatar className="h-10 w-10">
|
||||
<AvatarFallback className="text-sm avatar-initials">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<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',
|
||||
})}
|
||||
</p>
|
||||
<span className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">
|
||||
@{cat.username}
|
||||
</span>
|
||||
<p className="text-[12px] text-[var(--foreground-tertiary)]">{dateStr}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
{isOwner && (
|
||||
<button onClick={handleDelete} className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1">
|
||||
Удалить
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"
|
||||
title="Удалить"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Caption */}
|
||||
{cat.caption && (
|
||||
<p className="text-[15px] leading-[1.3]">
|
||||
<p className="text-[15px] leading-[1.4]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
{cat.caption}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-[var(--border)]" />
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<div className="flex items-center gap-6">
|
||||
<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'
|
||||
className={`btn-icon flex items-center gap-2 text-[15px] font-medium ${
|
||||
isOwner
|
||||
? 'text-[var(--foreground-tertiary)] cursor-not-allowed'
|
||||
: liked
|
||||
? 'text-[var(--danger)]'
|
||||
: 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
|
||||
}`}
|
||||
>
|
||||
<span className={`text-xl leading-none ${isLiked ? 'heart-animate' : ''}`}>
|
||||
{isLiked ? '❤️' : '🤍'}
|
||||
</span>
|
||||
{cat.likes_count > 0 && <span>{cat.likes_count}</span>}
|
||||
<Heart
|
||||
className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
|
||||
/>
|
||||
{cat.likes_count > 0 && <span className="tabular-nums">{cat.likes_count}</span>}
|
||||
</button>
|
||||
<span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points} баллов</span>
|
||||
|
||||
<span className="flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)]">
|
||||
<span>🏆</span>
|
||||
<span className="font-semibold">{cat.user_points}</span>
|
||||
<span className="text-[var(--foreground-tertiary)]">баллов</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Back to feed button */}
|
||||
<div className="pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigate('/feed')}
|
||||
className="rounded-full text-[12px] h-8"
|
||||
>
|
||||
← В ленту
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,28 @@
|
||||
import { useState } from 'react';
|
||||
import { useCats } from '@/hooks/useCats';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import CatCard from '@/components/CatCard';
|
||||
import FeedSidebar from '@/components/FeedSidebar';
|
||||
import CatModal from '@/components/CatModal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react';
|
||||
|
||||
function FeedSkeleton() {
|
||||
return (
|
||||
<div className="space-y-2.5">
|
||||
<div className="space-y-4">
|
||||
{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 rounded" />
|
||||
<div key={i} className="card overflow-hidden">
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<Skeleton className="h-10 w-10 rounded-full" />
|
||||
<div className="space-y-1.5">
|
||||
<Skeleton className="h-4 w-28 rounded-full" />
|
||||
<Skeleton className="h-3 w-16 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<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 className="p-4 space-y-2">
|
||||
<Skeleton className="h-4 w-40 rounded-full" />
|
||||
<Skeleton className="h-4 w-20 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -31,27 +33,59 @@ function FeedSkeleton() {
|
||||
export default function FeedPage() {
|
||||
const [page, setPage] = useState(1);
|
||||
const [modalCatId, setModalCatId] = useState<number | null>(null);
|
||||
const { data, isLoading, isError } = useCats(page);
|
||||
const { data, isLoading, isError, refetch } = useCats(page);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[660px] px-4 py-4">
|
||||
<div className="flex gap-6">
|
||||
{/* Feed */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<main className="flex-1 min-w-0">
|
||||
{/* Page indicator */}
|
||||
{data && data.totalPages > 0 && (
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-[13px] font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider">
|
||||
Лента
|
||||
</h2>
|
||||
<span className="text-[12px] text-[var(--foreground-tertiary)] tabular-nums">
|
||||
{data.total} публикаций
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && <FeedSkeleton />}
|
||||
|
||||
{isError && (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<p className="text-[15px] text-[#8e8e93] mb-4">Не удалось загрузить котов</p>
|
||||
<Button variant="outline" onClick={() => setPage(1)} className="rounded-full text-[13px]">Попробовать снова</Button>
|
||||
<div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in">
|
||||
<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--danger-light)]">
|
||||
<span className="text-2xl">😿</span>
|
||||
</div>
|
||||
<p className="text-[17px] font-semibold mb-1.5">Не удалось загрузить</p>
|
||||
<p className="text-[14px] text-[var(--foreground-secondary)] mb-6 max-w-xs">
|
||||
Проверьте подключение к интернету и попробуйте снова
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => refetch()}
|
||||
className="rounded-full text-[13px] gap-1.5"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
Попробовать снова
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data && data.cats.length === 0 && (
|
||||
<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]">
|
||||
<div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in">
|
||||
<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--primary-light)]">
|
||||
<span className="text-2xl">🐱</span>
|
||||
</div>
|
||||
<p className="text-[17px] font-semibold mb-1.5">Пока нет котов</p>
|
||||
<p className="text-[14px] text-[var(--foreground-secondary)] mb-6">
|
||||
Будьте первым, кто загрузит фото кота
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => window.location.href = '/upload'}
|
||||
className="rounded-full text-[13px] bg-[var(--primary)] hover:bg-[var(--primary-hover)]"
|
||||
>
|
||||
Загрузить кота
|
||||
</Button>
|
||||
</div>
|
||||
@@ -59,33 +93,60 @@ export default function FeedPage() {
|
||||
|
||||
{data && data.cats.length > 0 && (
|
||||
<>
|
||||
{data.cats.map((cat) => (
|
||||
{data.cats.map((cat, index) => (
|
||||
<CatCard key={cat.id} cat={cat} onOpen={setModalCatId} />
|
||||
))}
|
||||
|
||||
{data.totalPages > 1 && (
|
||||
<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" />
|
||||
<nav 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-full text-[13px] h-9 px-4 gap-1"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
Назад
|
||||
</Button>
|
||||
<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">
|
||||
|
||||
<div className="flex gap-1.5">
|
||||
{Array.from({ length: data.totalPages }, (_, i) => i + 1).map((p) => (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => setPage(p)}
|
||||
className={`h-8 w-8 rounded-full text-[13px] font-medium transition-all ${
|
||||
p === page
|
||||
? 'bg-[var(--primary)] text-white'
|
||||
: 'text-[var(--foreground-secondary)] hover:bg-[var(--secondary)]'
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
disabled={page >= data.totalPages}
|
||||
className="rounded-full text-[13px] h-9 px-4 gap-1"
|
||||
>
|
||||
Вперёд
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
<ChevronRight className="h-4 w-4" strokeWidth={1.5} />
|
||||
</Button>
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Sidebar — hidden on mobile */}
|
||||
<div className="hidden lg:block w-[220px] shrink-0">
|
||||
<div className="sticky top-16">
|
||||
<aside className="hidden lg:block w-[240px] shrink-0">
|
||||
<div className="sticky top-20">
|
||||
<FeedSidebar />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
|
||||
|
||||
@@ -26,46 +26,82 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<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-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
|
||||
<Cat className="h-7 w-7 text-white" />
|
||||
<div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
|
||||
<div className="w-full max-w-sm animate-fade-in-up">
|
||||
<div className="text-center mb-10">
|
||||
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
|
||||
<Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h1 className="text-[24px] font-bold">Catstagram</h1>
|
||||
<p className="text-[14px] text-[#8e8e93] mt-1">Войдите, чтобы смотреть котов</p>
|
||||
<h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
|
||||
<p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
|
||||
Войдите, чтобы смотреть котов
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>}
|
||||
<form onSubmit={handleSubmit} className="space-y-3.5">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
|
||||
Имя пользователя
|
||||
</label>
|
||||
<Input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="your_cat_lover"
|
||||
required
|
||||
autoFocus
|
||||
className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
|
||||
Пароль
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
required
|
||||
className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
|
||||
<span>⚠</span>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
|
||||
disabled={loading}
|
||||
className="w-full h-12 rounded-xl text-[15px] font-semibold bg-[var(--primary)] hover:bg-[var(--primary-hover)] disabled:opacity-60 transition-all"
|
||||
>
|
||||
{loading ? 'Вход...' : 'Войти'}
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
|
||||
Вход...
|
||||
</span>
|
||||
) : 'Войти'}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="relative my-8">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-[var(--border)]"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
|
||||
или
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-6 text-center text-[14px] text-[#8e8e93]">
|
||||
<p className="text-center text-[14px] text-[var(--foreground-secondary)]">
|
||||
Нет аккаунта?{' '}
|
||||
<Link to="/register" className="font-medium text-[#2aabee] hover:underline">
|
||||
<Link to="/register" className="link-blue">
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@@ -6,13 +6,14 @@ 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 { ArrowLeft, Plus, Heart } from 'lucide-react';
|
||||
import { ArrowLeft, Plus, LogOut, Heart } from 'lucide-react';
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { id: paramId } = useParams<{ id?: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user: me } = useAuth();
|
||||
const { user: me, logout } = useAuth();
|
||||
const [modalCatId, setModalCatId] = useState<number | null>(null);
|
||||
const [tab, setTab] = useState<'photos' | 'likes'>('photos');
|
||||
|
||||
const profileUserId = paramId ? parseInt(paramId) : me?.id;
|
||||
const isMe = !paramId || (me && profileUserId === me.id);
|
||||
@@ -28,15 +29,17 @@ export default function ProfilePage() {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<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-5 w-32 rounded" />
|
||||
<Skeleton className="h-4 w-40 rounded" />
|
||||
<div className="flex items-center gap-5 mb-10">
|
||||
<Skeleton className="h-20 w-20 rounded-full" />
|
||||
<div className="space-y-2.5 flex-1">
|
||||
<Skeleton className="h-6 w-36 rounded-full" />
|
||||
<Skeleton className="h-4 w-48 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-1">
|
||||
{Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-lg" />))}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Skeleton key={i} className="aspect-square rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -44,9 +47,14 @@ export default function ProfilePage() {
|
||||
|
||||
if (!profileUser && !isMe) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<p className="text-[15px] text-[#8e8e93] mb-4">Пользователь не найден</p>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
|
||||
<div className="flex flex-col items-center justify-center py-24 animate-fade-in">
|
||||
<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]">
|
||||
<span className="text-2xl">🔍</span>
|
||||
</div>
|
||||
<p className="text-[17px] font-semibold mb-1.5">Пользователь не найден</p>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px] mt-2">
|
||||
Вернуться в ленту
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -56,87 +64,142 @@ export default function ProfilePage() {
|
||||
const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[660px] px-4 py-8">
|
||||
<div className="mx-auto max-w-[660px] px-4 py-6">
|
||||
{!isMe && (
|
||||
<button onClick={() => navigate(-1)} className="mb-5 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors">
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-4 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
Назад
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Profile header */}
|
||||
<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">
|
||||
<div className="flex items-center gap-6 mb-8">
|
||||
<Avatar className="h-20 w-20 shrink-0 ring-2 ring-[var(--primary)]/20 ring-offset-2">
|
||||
<AvatarFallback className="text-[26px] font-bold avatar-initials">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-1.5">
|
||||
<h1 className="text-[18px] font-semibold">@{profileUser?.username}</h1>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-[20px] font-bold truncate">@{profileUser?.username}</h1>
|
||||
{isMe && (
|
||||
<Button variant="outline" size="sm" className="rounded-full text-[12px] h-7 px-3">
|
||||
Редактировать
|
||||
</Button>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="btn-icon h-8 w-8 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)] ml-auto"
|
||||
title="Выйти"
|
||||
>
|
||||
<LogOut className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-[14px]">
|
||||
<div>
|
||||
<span className="font-semibold">{cats.length}</span>{' '}
|
||||
<span className="text-[#8e8e93]">публикаций</span>
|
||||
|
||||
<div className="flex items-center gap-6 text-[14px] mb-3">
|
||||
<div className="text-center">
|
||||
<p className="font-bold text-[16px]">{cats.length}</p>
|
||||
<p className="text-[12px] text-[var(--foreground-secondary)]">публикаций</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-semibold">{totalLikes}</span>{' '}
|
||||
<span className="text-[#8e8e93]">лайков</span>
|
||||
<div className="text-center">
|
||||
<p className="font-bold text-[16px]">{totalLikes}</p>
|
||||
<p className="text-[12px] text-[var(--foreground-secondary)]">лайков</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-semibold">🏆{profileUser?.points ?? 0}</span>{' '}
|
||||
<span className="text-[#8e8e93]">баллов</span>
|
||||
<div className="text-center">
|
||||
<p className="font-bold text-[16px]">🏆{profileUser?.points ?? 0}</p>
|
||||
<p className="text-[12px] text-[var(--foreground-secondary)]">баллов</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isMe && (
|
||||
<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>
|
||||
<Link to="/upload">
|
||||
<Button size="sm" className="rounded-full text-[13px] h-8 bg-[var(--primary)] hover:bg-[var(--primary-hover)] gap-1.5">
|
||||
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
Новая публикация
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{cats.length === 0 ? (
|
||||
<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-full text-[13px] bg-[#2aabee] hover:bg-[#1d9bd9]">Загрузить кота</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-1">
|
||||
{cats.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setModalCatId(cat.id)}
|
||||
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/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>
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 mb-5 border-b border-[var(--border)]">
|
||||
<button
|
||||
onClick={() => setTab('photos')}
|
||||
className={`px-5 py-3 text-[14px] font-medium border-b-2 transition-all ${
|
||||
tab === 'photos'
|
||||
? 'border-[var(--primary)] text-[var(--primary)]'
|
||||
: 'border-transparent text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
|
||||
}`}
|
||||
>
|
||||
Фото
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTab('likes')}
|
||||
className={`px-5 py-3 text-[14px] font-medium border-b-2 transition-all ${
|
||||
tab === 'likes'
|
||||
? 'border-[var(--primary)] text-[var(--primary)]'
|
||||
: 'border-transparent text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
|
||||
}`}
|
||||
>
|
||||
Избранное
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{tab === 'photos' && (
|
||||
cats.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in">
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--secondary)]">
|
||||
<span className="text-xl">📸</span>
|
||||
</div>
|
||||
<p className="text-[15px] font-medium mb-1">Пока нет котов</p>
|
||||
<p className="text-[13px] text-[var(--foreground-secondary)] mb-5 max-w-xs">
|
||||
{isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
|
||||
</p>
|
||||
{isMe && (
|
||||
<Link to="/upload">
|
||||
<Button size="sm" className="rounded-full text-[13px] bg-[var(--primary)] hover:bg-[var(--primary-hover)]">
|
||||
Загрузить кота
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{cats.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setModalCatId(cat.id)}
|
||||
className="group relative aspect-square overflow-hidden bg-[var(--secondary)] rounded-xl"
|
||||
>
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
className="h-full w-full object-cover transition-all duration-300 group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
|
||||
<div className="flex items-center gap-1.5 text-white text-[13px] font-semibold">
|
||||
<Heart className="h-4 w-4 fill-white" strokeWidth={2} />
|
||||
<span>{cat.likes_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{tab === 'likes' && (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in">
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--primary-light)]">
|
||||
<Heart className="h-6 w-6 text-[var(--primary)]" strokeWidth={1.5} />
|
||||
</div>
|
||||
<p className="text-[15px] font-medium mb-1">Скоро</p>
|
||||
<p className="text-[13px] text-[var(--foreground-secondary)]">
|
||||
Здесь появятся понравившиеся коты
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -33,56 +33,97 @@ export default function RegisterPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<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-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
|
||||
<Cat className="h-7 w-7 text-white" />
|
||||
<div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
|
||||
<div className="w-full max-w-sm animate-fade-in-up">
|
||||
<div className="text-center mb-10">
|
||||
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
|
||||
<Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h1 className="text-[24px] font-bold">Catstagram</h1>
|
||||
<p className="text-[14px] text-[#8e8e93] mt-1">Присоединяйтесь к сообществу</p>
|
||||
<h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
|
||||
<p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
|
||||
Присоединяйтесь к сообществу
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>}
|
||||
<form onSubmit={handleSubmit} className="space-y-3.5">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
|
||||
Имя пользователя
|
||||
</label>
|
||||
<Input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="your_cat_lover"
|
||||
minLength={3}
|
||||
required
|
||||
autoFocus
|
||||
className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
|
||||
Пароль
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Минимум 4 символа"
|
||||
minLength={4}
|
||||
required
|
||||
className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
|
||||
Подтвердите пароль
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
placeholder="Повторите пароль"
|
||||
required
|
||||
className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
|
||||
<span>⚠</span>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
|
||||
disabled={loading}
|
||||
className="w-full h-12 rounded-xl text-[15px] font-semibold bg-[var(--primary)] hover:bg-[var(--primary-hover)] disabled:opacity-60 transition-all"
|
||||
>
|
||||
{loading ? 'Создание...' : 'Создать аккаунт'}
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
|
||||
Создание...
|
||||
</span>
|
||||
) : 'Создать аккаунт'}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="relative my-8">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-[var(--border)]"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
|
||||
или
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-6 text-center text-[14px] text-[#8e8e93]">
|
||||
<p className="text-center text-[14px] text-[var(--foreground-secondary)]">
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link to="/login" className="font-medium text-[#2aabee] hover:underline">
|
||||
<Link to="/login" className="link-blue">
|
||||
Войти
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@@ -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 } from 'lucide-react';
|
||||
import { ArrowLeft, Upload, X, Image } from 'lucide-react';
|
||||
|
||||
export default function UploadPage() {
|
||||
const navigate = useNavigate();
|
||||
@@ -42,9 +42,11 @@ export default function UploadPage() {
|
||||
try {
|
||||
const result = await uploadMutation.mutateAsync(fd);
|
||||
if (user) updateUser({ ...user, points: (user.points || 0) + 10 });
|
||||
toast('+10 баллов');
|
||||
toast('+10 баллов 🎉');
|
||||
navigate(`/cat/${result.cat.id}`);
|
||||
} catch { toast('Ошибка загрузки', 'error'); }
|
||||
} catch {
|
||||
toast('Ошибка загрузки', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const clearFile = () => {
|
||||
@@ -57,80 +59,124 @@ export default function UploadPage() {
|
||||
<div className="mx-auto max-w-[580px] px-4 py-6">
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-4 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors"
|
||||
className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors group"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
<ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
|
||||
Назад
|
||||
</button>
|
||||
|
||||
<h1 className="text-[20px] font-semibold mb-5">Новая публикация</h1>
|
||||
<h1 className="text-[22px] font-bold mb-6">Новая публикация</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]'
|
||||
className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all ${
|
||||
isDragActive
|
||||
? 'border-[var(--primary)] bg-[var(--primary-light)] scale-[1.02]'
|
||||
: 'border-[var(--border)] hover:bg-[var(--secondary)] hover:border-[var(--foreground-tertiary)]'
|
||||
}`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<div className="mb-4">
|
||||
<Upload className="mx-auto h-8 w-8 text-[#8e8e93]" strokeWidth={1.5} />
|
||||
<div className="mb-5 flex justify-center">
|
||||
<div className="h-16 w-16 rounded-full bg-[var(--secondary)] flex items-center justify-center">
|
||||
{isDragActive ? (
|
||||
<Image className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.5} />
|
||||
) : (
|
||||
<Upload className="h-7 w-7 text-[var(--foreground-secondary)]" strokeWidth={1.5} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[15px] font-medium mb-1">
|
||||
<p className="text-[16px] font-semibold 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>
|
||||
<p className="text-[14px] text-[var(--foreground-secondary)] mb-6">
|
||||
или нажмите, чтобы выбрать
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="rounded-full text-[13px] px-6"
|
||||
>
|
||||
Выбрать файл
|
||||
</Button>
|
||||
<p className="mt-5 text-[12px] text-[var(--foreground-tertiary)]">
|
||||
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" />
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
{/* Preview */}
|
||||
<div className="relative bg-[var(--secondary)] rounded-2xl overflow-hidden shadow-sm">
|
||||
<img
|
||||
src={preview!}
|
||||
alt="Preview"
|
||||
className="max-h-[420px] 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"
|
||||
className="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all backdrop-blur-sm"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Caption input */}
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar className="h-8 w-8 shrink-0">
|
||||
<AvatarFallback className="text-xs bg-[#2aabee] text-white">
|
||||
<Avatar className="h-9 w-9 shrink-0">
|
||||
<AvatarFallback className="text-xs avatar-initials">
|
||||
{user?.username?.charAt(0).toUpperCase() || '?'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<p className="text-[13px] font-medium mb-1">{user?.username}</p>
|
||||
<p className="text-[14px] font-semibold mb-1.5">{user?.username}</p>
|
||||
<textarea
|
||||
placeholder="Подпись к фото..."
|
||||
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]"
|
||||
rows={3}
|
||||
className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[var(--foreground-tertiary)] leading-[1.4]"
|
||||
/>
|
||||
<p className="text-right text-[11px] text-[#8e8e93] mt-0.5">{caption.length}/200</p>
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
<span className="text-[11px] text-[var(--foreground-tertiary)]">
|
||||
{caption.length > 150 ? `Осталось ${200 - caption.length} символов` : ''}
|
||||
</span>
|
||||
<span className="text-[11px] text-[var(--foreground-tertiary)] tabular-nums">
|
||||
{caption.length}/200
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<span className="text-[13px] text-[#8e8e93]">+10 баллов</span>
|
||||
{/* Submit */}
|
||||
<div className="flex items-center justify-between pt-2 border-t border-[var(--border)]">
|
||||
<div className="flex items-center gap-2 text-[13px] text-[var(--foreground-secondary)]">
|
||||
<span>🏆</span>
|
||||
<span className="font-medium">+10 баллов</span>
|
||||
<span className="text-[var(--foreground-tertiary)]">за публикацию</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={uploadMutation.isPending}
|
||||
size="sm"
|
||||
className="rounded-full text-[14px] bg-[#2aabee] hover:bg-[#1d9bd9] px-6"
|
||||
className="rounded-full text-[14px] bg-[var(--primary)] hover:bg-[var(--primary-hover)] px-6 h-10 disabled:opacity-60"
|
||||
>
|
||||
{uploadMutation.isPending ? 'Публикация...' : 'Опубликовать'}
|
||||
{uploadMutation.isPending ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
|
||||
Публикация...
|
||||
</span>
|
||||
) : 'Опубликовать'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploadMutation.isError && (
|
||||
<p className="mt-3 text-center text-[13px] text-[#ff3b30]">Не удалось загрузить. Попробуйте снова.</p>
|
||||
{uploadMutation.isError && (
|
||||
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
|
||||
<span>⚠</span>
|
||||
<span>Не удалось загрузить. Попробуйте снова.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user