391 lines
14 KiB
TypeScript
391 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef } from "react";
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Upload,
|
|
FileText,
|
|
X,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Monitor,
|
|
Palette,
|
|
FileImage,
|
|
ArrowRight,
|
|
Info
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
const categories = [
|
|
{
|
|
id: "digital-art",
|
|
title: "Digital Art",
|
|
icon: Monitor,
|
|
description: "Artwork created using digital tools and software",
|
|
},
|
|
{
|
|
id: "paintings",
|
|
title: "Paintings",
|
|
icon: Palette,
|
|
description: "Traditional paintings in any medium",
|
|
},
|
|
{
|
|
id: "poster-making",
|
|
title: "Poster Making",
|
|
icon: FileImage,
|
|
description: "Creative posters with impactful messages",
|
|
},
|
|
];
|
|
|
|
export default function SubmitPage() {
|
|
const [formData, setFormData] = useState({
|
|
title: "",
|
|
description: "",
|
|
category: "",
|
|
});
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [preview, setPreview] = useState<string | null>(null);
|
|
const [fileError, setFileError] = useState<string | null>(null);
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [submitSuccess, setSubmitSuccess] = useState(false);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleFileSelect = (selectedFile: File) => {
|
|
const validTypes = ["image/jpeg", "image/png", "application/pdf"];
|
|
const maxSize = 10 * 1024 * 1024; // 10MB
|
|
|
|
setFileError(null);
|
|
|
|
if (!validTypes.includes(selectedFile.type)) {
|
|
setFileError("Invalid file type. Please upload a JPG, PNG, or PDF file.");
|
|
return;
|
|
}
|
|
|
|
if (selectedFile.size > maxSize) {
|
|
setFileError("File too large. Maximum size is 10MB.");
|
|
return;
|
|
}
|
|
|
|
setFile(selectedFile);
|
|
|
|
if (selectedFile.type.startsWith("image/")) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => setPreview(e.target?.result as string);
|
|
reader.readAsDataURL(selectedFile);
|
|
} else {
|
|
setPreview(null);
|
|
}
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
setIsDragging(false);
|
|
const droppedFile = e.dataTransfer.files[0];
|
|
if (droppedFile) handleFileSelect(droppedFile);
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!file || !formData.category) return;
|
|
|
|
setIsSubmitting(true);
|
|
// TODO: Implement actual submission logic
|
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
|
setIsSubmitting(false);
|
|
setSubmitSuccess(true);
|
|
};
|
|
|
|
const removeFile = () => {
|
|
setFile(null);
|
|
setPreview(null);
|
|
setFileError(null);
|
|
if (fileInputRef.current) fileInputRef.current.value = "";
|
|
};
|
|
|
|
if (submitSuccess) {
|
|
return (
|
|
<main className="min-h-screen bg-black pt-32 pb-20 flex items-center justify-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
className="text-center px-4"
|
|
>
|
|
<div className="w-20 h-20 rounded-full bg-lime-400/20 flex items-center justify-center mx-auto mb-6">
|
|
<CheckCircle className="w-10 h-10 text-lime-400" />
|
|
</div>
|
|
<h1 className="text-3xl sm:text-4xl font-black text-white mb-4">
|
|
Submission Successful!
|
|
</h1>
|
|
<p className="text-zinc-400 mb-8 max-w-md mx-auto">
|
|
Your artwork has been submitted for review. You'll receive an email
|
|
notification once it's approved by our moderators.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button
|
|
onClick={() => {
|
|
setSubmitSuccess(false);
|
|
setFormData({ title: "", description: "", category: "" });
|
|
setFile(null);
|
|
setPreview(null);
|
|
setFileError(null);
|
|
}}
|
|
className="inline-flex items-center justify-center gap-2 bg-lime-400 text-black px-8 py-4 rounded-full font-bold hover:bg-lime-300 transition-all"
|
|
>
|
|
Submit Another
|
|
</button>
|
|
<Link
|
|
href="/gallery"
|
|
className="inline-flex items-center justify-center gap-2 bg-transparent text-white px-8 py-4 rounded-full font-bold border border-zinc-700 hover:border-zinc-500 transition-all"
|
|
>
|
|
View Gallery
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-black pt-32 pb-20">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
|
|
SUBMIT ARTWORK
|
|
</span>
|
|
<h1 className="text-4xl sm:text-5xl font-black tracking-tight text-white mb-4">
|
|
Share Your <span className="text-lime-400">Masterpiece</span>
|
|
</h1>
|
|
<p className="text-zinc-400 text-lg max-w-2xl mx-auto">
|
|
Upload your artwork and let the world see your creativity.
|
|
Make sure to read the rules before submitting.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Info Banner */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 mb-8 flex items-start gap-3"
|
|
>
|
|
<Info className="w-5 h-5 text-lime-400 flex-shrink-0 mt-0.5" />
|
|
<div className="text-sm text-zinc-400">
|
|
<strong className="text-white">Submission Requirements:</strong> JPG, PNG, or PDF files up to 10MB.
|
|
Minimum resolution 1920x1080. AI-generated artwork will be detected and rejected.
|
|
</div>
|
|
</motion.div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-8">
|
|
{/* Category Selection */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
>
|
|
<label className="block text-white text-lg font-bold mb-4">
|
|
Select Category
|
|
</label>
|
|
<div className="grid sm:grid-cols-3 gap-4">
|
|
{categories.map((category) => (
|
|
<button
|
|
key={category.id}
|
|
type="button"
|
|
onClick={() => setFormData({ ...formData, category: category.id })}
|
|
className={`p-6 rounded-2xl border-2 transition-all text-left ${
|
|
formData.category === category.id
|
|
? "bg-lime-400/10 border-lime-400"
|
|
: "bg-zinc-900 border-zinc-800 hover:border-zinc-700"
|
|
}`}
|
|
>
|
|
<category.icon
|
|
className={`w-8 h-8 mb-3 ${
|
|
formData.category === category.id ? "text-lime-400" : "text-zinc-500"
|
|
}`}
|
|
/>
|
|
<h3 className={`font-bold mb-1 ${
|
|
formData.category === category.id ? "text-lime-400" : "text-white"
|
|
}`}>
|
|
{category.title}
|
|
</h3>
|
|
<p className="text-zinc-500 text-sm">{category.description}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* File Upload */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
>
|
|
<label className="block text-white text-lg font-bold mb-4">
|
|
Upload Artwork
|
|
</label>
|
|
<div
|
|
onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
|
|
onDragLeave={() => setIsDragging(false)}
|
|
onDrop={handleDrop}
|
|
className={`relative border-2 border-dashed rounded-2xl transition-all ${
|
|
isDragging
|
|
? "border-lime-400 bg-lime-400/5"
|
|
: file
|
|
? "border-lime-400/50 bg-zinc-900"
|
|
: "border-zinc-700 bg-zinc-900 hover:border-zinc-600"
|
|
}`}
|
|
>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".jpg,.jpeg,.png,.pdf"
|
|
onChange={(e) => e.target.files?.[0] && handleFileSelect(e.target.files[0])}
|
|
className="hidden"
|
|
/>
|
|
|
|
{file ? (
|
|
<div className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
{preview ? (
|
|
<img
|
|
src={preview}
|
|
alt="Preview"
|
|
className="w-32 h-32 object-cover rounded-xl"
|
|
/>
|
|
) : (
|
|
<div className="w-32 h-32 bg-zinc-800 rounded-xl flex items-center justify-center">
|
|
<FileText className="w-12 h-12 text-zinc-600" />
|
|
</div>
|
|
)}
|
|
<div className="flex-1">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-white font-semibold mb-1">{file.name}</p>
|
|
<p className="text-zinc-500 text-sm">
|
|
{(file.size / 1024 / 1024).toFixed(2)} MB
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={removeFile}
|
|
className="p-2 hover:bg-zinc-800 rounded-lg transition-colors"
|
|
>
|
|
<X className="w-5 h-5 text-zinc-400" />
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-3 text-lime-400 text-sm">
|
|
<CheckCircle className="w-4 h-4" />
|
|
File ready for upload
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="w-full p-12 text-center"
|
|
>
|
|
<div className="w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center mx-auto mb-4">
|
|
<Upload className="w-8 h-8 text-zinc-500" />
|
|
</div>
|
|
<p className="text-white font-semibold mb-2">
|
|
Drop your artwork here or click to browse
|
|
</p>
|
|
<p className="text-zinc-500 text-sm">
|
|
Supports JPG, PNG, PDF up to 10MB
|
|
</p>
|
|
</button>
|
|
)}
|
|
</div>
|
|
{fileError && (
|
|
<div className="flex items-center gap-2 mt-3 text-red-500 text-sm">
|
|
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
|
{fileError}
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
{/* Title & Description */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
className="space-y-6"
|
|
>
|
|
<div>
|
|
<label className="block text-white text-lg font-bold mb-4">
|
|
Artwork Title
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
maxLength={100}
|
|
value={formData.title}
|
|
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
|
className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-4 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors"
|
|
placeholder="Give your artwork a memorable title"
|
|
/>
|
|
<p className="text-zinc-500 text-sm mt-2">{formData.title.length}/100 characters</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-white text-lg font-bold mb-4">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
required
|
|
maxLength={500}
|
|
rows={4}
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-4 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors resize-none"
|
|
placeholder="Tell us about your artwork, the inspiration behind it, and the techniques used..."
|
|
/>
|
|
<p className="text-zinc-500 text-sm mt-2">{formData.description.length}/500 characters</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Submit Button */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.5 }}
|
|
className="flex flex-col sm:flex-row gap-4"
|
|
>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting || !file || !formData.category || !formData.title || !formData.description}
|
|
className="flex-1 flex items-center justify-center gap-2 bg-lime-400 text-black px-8 py-4 rounded-full font-bold tracking-wider hover:bg-lime-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<div className="w-5 h-5 border-2 border-black/30 border-t-black rounded-full animate-spin" />
|
|
SUBMITTING...
|
|
</>
|
|
) : (
|
|
<>
|
|
SUBMIT ARTWORK
|
|
<ArrowRight className="w-5 h-5" />
|
|
</>
|
|
)}
|
|
</button>
|
|
<Link
|
|
href="/rules"
|
|
className="flex items-center justify-center gap-2 bg-transparent text-white px-8 py-4 rounded-full font-bold border border-zinc-700 hover:border-zinc-500 transition-all"
|
|
>
|
|
View Rules
|
|
</Link>
|
|
</motion.div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|