UI: полноценный красивый интерфейс, iOS-style дизайн, все страницы
This commit is contained in:
@@ -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,81 +59,125 @@ 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