UI: доработано оформление — тени, анимации, градиенты, iOS-стиль
This commit is contained in:
@@ -36,8 +36,7 @@ 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 {
|
||||
@@ -73,21 +72,13 @@ export default function CatPage() {
|
||||
|
||||
if (isError || !cat) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-24 animate-fade-in">
|
||||
<div className="flex flex-col items-center justify-center py-24 animate-fade-in-up">
|
||||
<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>
|
||||
<p className="text-[14px] text-[var(--fg-secondary)] mb-6">Возможно, публикация была удалена</p>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -97,59 +88,43 @@ export default function CatPage() {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in">
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors group"
|
||||
>
|
||||
<div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in-up">
|
||||
<button onClick={() => navigate(-1)}
|
||||
className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group">
|
||||
<ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
|
||||
Назад
|
||||
</button>
|
||||
|
||||
<div className="card overflow-hidden">
|
||||
{/* Image */}
|
||||
<div className="bg-[var(--secondary)] relative img-loading">
|
||||
<div className="bg-[var(--secondary)] relative img-shimmer">
|
||||
{!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 className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
<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)}
|
||||
/>
|
||||
onLoad={() => setImageLoaded(true)} />
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-4">
|
||||
{/* Header */}
|
||||
<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 className="h-10 w-10 ring-1 ring-[var(--border)]">
|
||||
<AvatarFallback className="text-sm avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<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>
|
||||
<span className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">@{cat.username}</span>
|
||||
<p className="text-[12px] text-[var(--fg-tertiary)]">{dateStr}</p>
|
||||
</div>
|
||||
</Link>
|
||||
{isOwner && (
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"
|
||||
title="Удалить"
|
||||
>
|
||||
<button onClick={handleDelete} className="btn-icon h-9 w-9 text-[var(--fg-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
|
||||
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Caption */}
|
||||
{cat.caption && (
|
||||
<p className="text-[15px] leading-[1.4]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
@@ -157,44 +132,26 @@ export default function CatPage() {
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-[var(--border)]" />
|
||||
<div className="border-t" />
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-6">
|
||||
<button
|
||||
onClick={toggleLike}
|
||||
disabled={isOwner || !user}
|
||||
<button onClick={toggleLike} disabled={isOwner || !user}
|
||||
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)]'
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
|
||||
/>
|
||||
isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-[var(--danger)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
|
||||
}`}>
|
||||
<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="flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)]">
|
||||
<span className="flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)]">
|
||||
<span>🏆</span>
|
||||
<span className="font-semibold">{cat.user_points}</span>
|
||||
<span className="text-[var(--foreground-tertiary)]">баллов</span>
|
||||
<span className="text-[var(--fg-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"
|
||||
>
|
||||
← В ленту
|
||||
<div className="pt-1">
|
||||
<Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-full text-[12px] h-8 gap-1">
|
||||
<ArrowLeft className="h-3.5 w-3.5" strokeWidth={1.5} /> В ленту
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@ 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, RefreshCw } from 'lucide-react';
|
||||
|
||||
function FeedSkeleton() {
|
||||
@@ -13,16 +12,16 @@ function FeedSkeleton() {
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<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 className="h-10 w-10 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div className="space-y-2">
|
||||
<div className="h-3.5 w-28 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div className="h-2.5 w-16 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="aspect-[4/3] w-full" />
|
||||
<div className="aspect-[4/3] w-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div className="p-4 space-y-2">
|
||||
<Skeleton className="h-4 w-40 rounded-full" />
|
||||
<Skeleton className="h-4 w-20 rounded-full" />
|
||||
<div className="h-3.5 w-40 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div className="h-3.5 w-20 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -39,34 +38,23 @@ export default function FeedPage() {
|
||||
<div className="mx-auto max-w-[660px] px-4 py-4">
|
||||
<div className="flex gap-6">
|
||||
<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>
|
||||
<h2 className="text-[12px] font-bold text-[var(--fg-secondary)] uppercase tracking-[0.08em]">Лента</h2>
|
||||
<span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{data.total} публикаций</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && <FeedSkeleton />}
|
||||
|
||||
{isError && (
|
||||
<div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in">
|
||||
<div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in-up">
|
||||
<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"
|
||||
>
|
||||
<p className="text-[14px] text-[var(--fg-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>
|
||||
@@ -74,18 +62,14 @@ export default function FeedPage() {
|
||||
)}
|
||||
|
||||
{data && data.cats.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in">
|
||||
<div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in-up">
|
||||
<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)]"
|
||||
>
|
||||
<p className="text-[14px] text-[var(--fg-secondary)] mb-6">Будьте первым, кто загрузит фото кота</p>
|
||||
<Button onClick={() => window.location.href = '/upload'} className="rounded-full text-[13px]"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
|
||||
Загрузить кота
|
||||
</Button>
|
||||
</div>
|
||||
@@ -93,48 +77,32 @@ export default function FeedPage() {
|
||||
|
||||
{data && data.cats.length > 0 && (
|
||||
<>
|
||||
{data.cats.map((cat, index) => (
|
||||
{data.cats.map((cat) => (
|
||||
<CatCard key={cat.id} cat={cat} onOpen={setModalCatId} />
|
||||
))}
|
||||
|
||||
{data.totalPages > 1 && (
|
||||
<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} />
|
||||
Назад
|
||||
<nav className="flex items-center justify-center gap-3 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-0.5">
|
||||
<ChevronLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
|
||||
</Button>
|
||||
|
||||
<div className="flex gap-1.5">
|
||||
{Array.from({ length: data.totalPages }, (_, i) => i + 1).map((p) => (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => setPage(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 === page ? 'text-white shadow-md' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'
|
||||
}`}
|
||||
>
|
||||
style={p === page ? { background: 'linear-gradient(135deg, #007aff, #5856d6)' } : {}}>
|
||||
{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-4 w-4" strokeWidth={1.5} />
|
||||
<Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages}
|
||||
className="rounded-full text-[13px] h-9 px-4 gap-0.5">
|
||||
Вперёд <ChevronRight className="h-4 w-4" strokeWidth={1.5} />
|
||||
</Button>
|
||||
</nav>
|
||||
)}
|
||||
@@ -143,9 +111,7 @@ export default function FeedPage() {
|
||||
</main>
|
||||
|
||||
<aside className="hidden lg:block w-[240px] shrink-0">
|
||||
<div className="sticky top-20">
|
||||
<FeedSidebar />
|
||||
</div>
|
||||
<div className="sticky top-20"><FeedSidebar /></div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -26,22 +26,22 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
|
||||
<div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
|
||||
<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"
|
||||
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full animate-float"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
|
||||
<Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
|
||||
<p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
|
||||
<h1 className="text-[28px] font-bold gradient-text">Catstagram</h1>
|
||||
<p className="text-[15px] text-[var(--fg-secondary)] mt-1.5">
|
||||
Войдите, чтобы смотреть котов
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">
|
||||
Имя пользователя
|
||||
</label>
|
||||
<Input
|
||||
@@ -50,11 +50,11 @@ export default function LoginPage() {
|
||||
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"
|
||||
className="h-12 text-[15px] rounded-xl bg-white border input-focus"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">
|
||||
Пароль
|
||||
</label>
|
||||
<Input
|
||||
@@ -63,13 +63,13 @@ export default function LoginPage() {
|
||||
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"
|
||||
className="h-12 text-[15px] rounded-xl bg-white border input-focus"
|
||||
/>
|
||||
</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>
|
||||
<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-up">
|
||||
<span>⚠️</span>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -77,7 +77,8 @@ export default function LoginPage() {
|
||||
<Button
|
||||
type="submit"
|
||||
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"
|
||||
className="w-full h-12 rounded-xl text-[15px] font-semibold transition-all active:scale-[0.98]"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
@@ -89,21 +90,15 @@ export default function LoginPage() {
|
||||
</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="absolute inset-0 flex items-center"><div className="w-full border-t"></div></div>
|
||||
<div className="relative flex justify-center">
|
||||
<span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
|
||||
или
|
||||
</span>
|
||||
<span className="px-4 text-[13px] text-[var(--fg-tertiary)] bg-[var(--bg)]">или</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-[14px] text-[var(--foreground-secondary)]">
|
||||
<p className="text-center text-[14px] text-[var(--fg-secondary)]">
|
||||
Нет аккаунта?{' '}
|
||||
<Link to="/register" className="link-blue">
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
<Link to="/register" className="link-accent">Зарегистрироваться</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@ export default function ProfilePage() {
|
||||
const navigate = useNavigate();
|
||||
const { user: me, logout } = useAuth();
|
||||
const [modalCatId, setModalCatId] = useState<number | null>(null);
|
||||
const [tab, setTab] = useState<'photos' | 'likes'>('photos');
|
||||
const [tab, setTab] = useState<'photos'>('photos');
|
||||
|
||||
const profileUserId = paramId ? parseInt(paramId) : me?.id;
|
||||
const isMe = !paramId || (me && profileUserId === me.id);
|
||||
@@ -37,9 +37,7 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{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-xl" />))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -47,14 +45,10 @@ export default function ProfilePage() {
|
||||
|
||||
if (!profileUser && !isMe) {
|
||||
return (
|
||||
<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>
|
||||
<div className="flex flex-col items-center justify-center py-24 animate-fade-in-up">
|
||||
<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>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px] mt-2">Вернуться в ленту</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -64,21 +58,17 @@ 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-6">
|
||||
<div className="mx-auto max-w-[660px] px-4 py-6 animate-fade-in-up">
|
||||
{!isMe && (
|
||||
<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 onClick={() => navigate(-1)} className="mb-4 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group">
|
||||
<ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
|
||||
Назад
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Profile header */}
|
||||
<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">
|
||||
<AvatarFallback className="text-[26px] font-bold" style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)', color: 'white', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
@@ -86,11 +76,7 @@ export default function ProfilePage() {
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-[20px] font-bold truncate">@{profileUser?.username}</h1>
|
||||
{isMe && (
|
||||
<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="Выйти"
|
||||
>
|
||||
<button onClick={logout} className="btn-icon h-8 w-8 text-[var(--fg-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)] ml-auto" title="Выйти">
|
||||
<LogOut className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
@@ -99,21 +85,22 @@ export default function ProfilePage() {
|
||||
<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>
|
||||
<p className="text-[11px] text-[var(--fg-secondary)]">публикаций</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="font-bold text-[16px]">{totalLikes}</p>
|
||||
<p className="text-[12px] text-[var(--foreground-secondary)]">лайков</p>
|
||||
<p className="text-[11px] text-[var(--fg-secondary)]">лайков</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="font-bold text-[16px]">🏆{profileUser?.points ?? 0}</p>
|
||||
<p className="text-[12px] text-[var(--foreground-secondary)]">баллов</p>
|
||||
<p className="text-[11px] text-[var(--fg-secondary)]">баллов</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isMe && (
|
||||
<Link to="/upload">
|
||||
<Button size="sm" className="rounded-full text-[13px] h-8 bg-[var(--primary)] hover:bg-[var(--primary-hover)] gap-1.5">
|
||||
<Button size="sm" className="rounded-full text-[13px] h-8 gap-1.5"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
|
||||
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
Новая публикация
|
||||
</Button>
|
||||
@@ -122,84 +109,42 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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)]'
|
||||
}`}
|
||||
>
|
||||
<div className="flex gap-1 mb-5">
|
||||
<button onClick={() => setTab('photos')}
|
||||
className={`px-5 py-2.5 text-[14px] font-medium rounded-lg transition-all ${
|
||||
tab === 'photos' ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]'
|
||||
}`}>
|
||||
Фото
|
||||
</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>
|
||||
</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)]">
|
||||
Здесь появятся понравившиеся коты
|
||||
{cats.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in-up">
|
||||
<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(--fg-secondary)] mb-5 max-w-xs">
|
||||
{isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
|
||||
</p>
|
||||
{isMe && (
|
||||
<Link to="/upload"><Button size="sm" className="rounded-full text-[13px]"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>Загрузить кота</Button></Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{cats.map((cat) => (
|
||||
<button key={cat.id} onClick={() => setModalCatId(cat.id)}
|
||||
className="group relative aspect-square overflow-hidden bg-[var(--secondary)] rounded-xl shadow-sm">
|
||||
<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 drop-shadow-sm">
|
||||
<Heart className="h-4 w-4 fill-white" strokeWidth={2} />
|
||||
<span>{cat.likes_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -18,12 +18,7 @@ export default function RegisterPage() {
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
if (password !== confirm) {
|
||||
setError('Пароли не совпадают');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirm) { setError('Пароли не совпадают'); return; }
|
||||
setLoading(true);
|
||||
try {
|
||||
await register(username, password);
|
||||
@@ -33,73 +28,41 @@ export default function RegisterPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
|
||||
<div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
|
||||
<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"
|
||||
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full animate-float"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
|
||||
<Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
|
||||
<p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
|
||||
Присоединяйтесь к сообществу
|
||||
</p>
|
||||
<h1 className="text-[28px] font-bold gradient-text">Catstagram</h1>
|
||||
<p className="text-[15px] text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
/>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[13px] font-medium text-[var(--fg-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 input-focus" />
|
||||
</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 className="space-y-1.5">
|
||||
<label className="text-[13px] font-medium text-[var(--fg-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 input-focus" />
|
||||
</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 className="space-y-1.5">
|
||||
<label className="text-[13px] font-medium text-[var(--fg-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 input-focus" />
|
||||
</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 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-up">
|
||||
<span>⚠️</span><span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
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"
|
||||
type="submit" disabled={loading}
|
||||
className="w-full h-12 rounded-xl text-[15px] font-semibold active:scale-[0.98] transition-all"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
@@ -111,21 +74,15 @@ export default function RegisterPage() {
|
||||
</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="absolute inset-0 flex items-center"><div className="w-full border-t"></div></div>
|
||||
<div className="relative flex justify-center">
|
||||
<span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
|
||||
или
|
||||
</span>
|
||||
<span className="px-4 text-[13px] text-[var(--fg-tertiary)] bg-[var(--bg)]">или</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-[14px] text-[var(--foreground-secondary)]">
|
||||
<p className="text-center text-[14px] text-[var(--fg-secondary)]">
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link to="/login" className="link-blue">
|
||||
Войти
|
||||
</Link>
|
||||
<Link to="/login" className="link-accent">Войти</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,18 +19,13 @@ export default function UploadPage() {
|
||||
|
||||
const onDrop = useCallback((accepted: File[]) => {
|
||||
const f = accepted[0];
|
||||
if (f) {
|
||||
setFile(f);
|
||||
if (preview) URL.revokeObjectURL(preview);
|
||||
setPreview(URL.createObjectURL(f));
|
||||
}
|
||||
if (f) { setFile(f); if (preview) URL.revokeObjectURL(preview); setPreview(URL.createObjectURL(f)); }
|
||||
}, [preview]);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] },
|
||||
maxFiles: 1,
|
||||
maxSize: 10 * 1024 * 1024,
|
||||
maxFiles: 1, maxSize: 10 * 1024 * 1024,
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
@@ -38,129 +33,77 @@ export default function UploadPage() {
|
||||
const fd = new FormData();
|
||||
fd.append('image', file);
|
||||
fd.append('caption', caption);
|
||||
|
||||
try {
|
||||
const result = await uploadMutation.mutateAsync(fd);
|
||||
if (user) updateUser({ ...user, points: (user.points || 0) + 10 });
|
||||
toast('+10 баллов 🎉');
|
||||
navigate(`/cat/${result.cat.id}`);
|
||||
} catch {
|
||||
toast('Ошибка загрузки', 'error');
|
||||
}
|
||||
} catch { toast('Ошибка загрузки', 'error'); }
|
||||
};
|
||||
|
||||
const clearFile = () => {
|
||||
setFile(null);
|
||||
if (preview) URL.revokeObjectURL(preview);
|
||||
setPreview(null);
|
||||
};
|
||||
const clearFile = () => { setFile(null); if (preview) URL.revokeObjectURL(preview); setPreview(null); };
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[580px] px-4 py-6">
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors group"
|
||||
>
|
||||
<button onClick={() => navigate(-1)}
|
||||
className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group">
|
||||
<ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
|
||||
Назад
|
||||
</button>
|
||||
|
||||
<h1 className="text-[22px] font-bold mb-6">Новая публикация</h1>
|
||||
<h1 className="text-[22px] font-bold mb-6 gradient-text">Новая публикация</h1>
|
||||
|
||||
{!preview ? (
|
||||
<div
|
||||
{...getRootProps()}
|
||||
<div {...getRootProps()}
|
||||
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)]'
|
||||
}`}
|
||||
>
|
||||
isDragActive ? 'border-[var(--primary)] bg-[var(--primary-light)] scale-[1.02]' : 'border-[var(--border)] hover:bg-[var(--secondary)] hover:border-[var(--fg-tertiary)]'
|
||||
}`}>
|
||||
<input {...getInputProps()} />
|
||||
<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} />
|
||||
)}
|
||||
{isDragActive ? <Image className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.5} /> : <Upload className="h-7 w-7 text-[var(--fg-secondary)]" strokeWidth={1.5} />}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[16px] font-semibold mb-1">
|
||||
{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
|
||||
</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>
|
||||
<p className="text-[16px] font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}</p>
|
||||
<p className="text-[14px] text-[var(--fg-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(--fg-tertiary)]">JPG, PNG, GIF, WebP · до 10 МБ</p>
|
||||
</div>
|
||||
) : (
|
||||
<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-9 w-9 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all backdrop-blur-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-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" strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Caption input */}
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar className="h-9 w-9 shrink-0">
|
||||
<AvatarFallback className="text-xs avatar-initials">
|
||||
{user?.username?.charAt(0).toUpperCase() || '?'}
|
||||
</AvatarFallback>
|
||||
<Avatar className="h-9 w-9 shrink-0 ring-1 ring-[var(--border)]">
|
||||
<AvatarFallback className="text-xs avatar-initials">{user?.username?.charAt(0).toUpperCase() || '?'}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<p className="text-[14px] font-semibold mb-1.5">{user?.username}</p>
|
||||
<textarea
|
||||
placeholder="Напишите подпись к фото..."
|
||||
value={caption}
|
||||
onChange={(e) => setCaption(e.target.value)}
|
||||
maxLength={200}
|
||||
rows={3}
|
||||
className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[var(--foreground-tertiary)] leading-[1.4]"
|
||||
/>
|
||||
<textarea placeholder="Напишите подпись к фото..." value={caption} onChange={(e) => setCaption(e.target.value)}
|
||||
maxLength={200} rows={3}
|
||||
className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.4]" />
|
||||
<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>
|
||||
<span className="text-[11px] text-[var(--fg-tertiary)]">{caption.length > 150 ? `Осталось ${200 - caption.length} символов` : ''}</span>
|
||||
<span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{caption.length}/200</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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)]">
|
||||
<div className="flex items-center justify-between pt-3 border-t">
|
||||
<div className="flex items-center gap-2 text-[13px] text-[var(--fg-secondary)]">
|
||||
<span>🏆</span>
|
||||
<span className="font-medium">+10 баллов</span>
|
||||
<span className="text-[var(--foreground-tertiary)]">за публикацию</span>
|
||||
<span className="text-[var(--fg-tertiary)]">за публикацию</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={uploadMutation.isPending}
|
||||
size="sm"
|
||||
className="rounded-full text-[14px] bg-[var(--primary)] hover:bg-[var(--primary-hover)] px-6 h-10 disabled:opacity-60"
|
||||
>
|
||||
<Button onClick={handleUpload} disabled={uploadMutation.isPending}
|
||||
size="sm" className="rounded-full text-[14px] px-6 h-10 disabled:opacity-60"
|
||||
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
|
||||
{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" />
|
||||
@@ -171,9 +114,8 @@ export default function UploadPage() {
|
||||
</div>
|
||||
|
||||
{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 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-up">
|
||||
<span>⚠️</span><span>Не удалось загрузить. Попробуйте снова.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user