diff --git a/src/app/upload-gallery/page.tsx b/src/app/upload-gallery/page.tsx new file mode 100644 index 0000000..815c105 --- /dev/null +++ b/src/app/upload-gallery/page.tsx @@ -0,0 +1,267 @@ +"use client"; + +import { useState } from 'react'; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import ProductCardFour from '@/components/sections/product/ProductCardFour'; +import FooterSimple from '@/components/sections/footer/FooterSimple'; +import { Upload, Tag as TagIcon, FileText, Image as ImageIcon } from "lucide-react"; + +interface UploadFormState { + title: string; + description: string; + tags: string; + imageFile: File | null; +} + +export default function UploadGalleryPage() { + const [uploadForm, setUploadForm] = useState({ + title: "", description: "", tags: "", imageFile: null, + }); + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setUploadForm((prev) => ({ ...prev, [name]: value })); + }; + + const handleFileChange = (e: React.ChangeEvent) => { + if (e.target.files && e.target.files[0]) { + setUploadForm((prev) => ({ ...prev, imageFile: e.target.files![0] })); + } + }; + + const handleDragOver = (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + e.dataTransfer.dropEffect = 'copy'; + }; + + const handleDrop = (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + if (e.dataTransfer.files && e.dataTransfer.files[0]) { + setUploadForm((prev) => ({ ...prev, imageFile: e.dataTransfer.files![0] })); + } + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log("Upload data:", uploadForm); + // Here you would typically send data to a server + alert("File ready for upload! (Check console for data)"); + // Reset form + setUploadForm({ + title: "", description: "", tags: "", imageFile: null, + }); + }; + + const navItems = [ + { name: "Properties", id: "properties", href: "/" }, + { name: "About", id: "about", href: "/" }, + { name: "Services", id: "services", href: "/" }, + { name: "Team", id: "team", href: "/" }, + { name: "Testimonials", id: "testimonials", href: "/" }, + { name: "Contact", id: "contact", href: "/" }, + { name: "Upload Gallery", href: "/upload-gallery" }, + ]; + + return ( + + + +
+

آپلود تصویر و گالری

+ + {/* Upload Form Component */} +
+

بارگذاری عکس جدید

+
+
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ + {/* Drag and Drop Upload Section */} +
+ +
document.getElementById('imageFile')?.click()} + > + +

فایل را اینجا بکشید و رها کنید یا کلیک کنید

+

(فایل‌های JPG، PNG، GIF پشتیبانی می‌شوند)

+ +
+ {uploadForm.imageFile && ( +

فایل انتخاب شده: {uploadForm.imageFile.name}

+ )} +
+ + +
+
+ + {/* Pinterest-style Masonry Photo Feed */} + +
+ + + + ); +}