Add src/app/upload-gallery/page.tsx
This commit is contained in:
267
src/app/upload-gallery/page.tsx
Normal file
267
src/app/upload-gallery/page.tsx
Normal file
@@ -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<UploadFormState>({
|
||||
title: "", description: "", tags: "", imageFile: null,
|
||||
});
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setUploadForm((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setUploadForm((prev) => ({ ...prev, imageFile: e.target.files![0] }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Luxe Properties"
|
||||
navItems={navItems}
|
||||
button={{ text: "Schedule Viewing", href: "/" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<h1 className="text-4xl font-semibold text-center mb-12 text-foreground">آپلود تصویر و گالری</h1>
|
||||
|
||||
{/* Upload Form Component */}
|
||||
<div className="bg-card p-8 rounded-lg shadow-xl mb-16 max-w-3xl mx-auto border border-accent/20">
|
||||
<h2 className="text-2xl font-semibold text-foreground mb-6 text-center">بارگذاری عکس جدید</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="title" className="block text-sm font-medium text-foreground mb-2">
|
||||
عنوان:
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
value={uploadForm.title}
|
||||
onChange={handleInputChange}
|
||||
placeholder="عنوان عکس خود را وارد کنید"
|
||||
className="w-full p-3 pl-10 bg-background border border-foreground/20 rounded-md text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
<ImageIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground/60" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-medium text-foreground mb-2">
|
||||
توضیحات:
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={uploadForm.description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="توضیحات مفصلی برای عکس خود بنویسید"
|
||||
rows={4}
|
||||
className="w-full p-3 pl-10 bg-background border border-foreground/20 rounded-md text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent"
|
||||
required
|
||||
></textarea>
|
||||
<FileText className="absolute left-3 top-3 text-foreground/60" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="tags" className="block text-sm font-medium text-foreground mb-2">
|
||||
برچسبها:
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="tags"
|
||||
name="tags"
|
||||
value={uploadForm.tags}
|
||||
onChange={handleInputChange}
|
||||
placeholder="برچسبها را با کاما جدا کنید (مثال: طبیعت، کوه، سفر)"
|
||||
className="w-full p-3 pl-10 bg-background border border-foreground/20 rounded-md text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
<TagIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground/60" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drag and Drop Upload Section */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
انتخاب فایل تصویر:
|
||||
</label>
|
||||
<div
|
||||
className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-foreground/30 rounded-lg p-6 text-center text-foreground/70 transition-all duration-300 ease-in-out hover:border-primary-cta hover:text-primary-cta cursor-pointer"
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => document.getElementById('imageFile')?.click()}
|
||||
>
|
||||
<Upload size={48} className="mb-4" />
|
||||
<p className="text-lg font-medium">فایل را اینجا بکشید و رها کنید یا کلیک کنید</p>
|
||||
<p className="text-sm">(فایلهای JPG، PNG، GIF پشتیبانی میشوند)</p>
|
||||
<input
|
||||
type="file"
|
||||
id="imageFile"
|
||||
name="imageFile"
|
||||
accept="image/jpeg,image/png,image/gif"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{uploadForm.imageFile && (
|
||||
<p className="mt-4 text-center text-foreground">فایل انتخاب شده: <span className="font-semibold">{uploadForm.imageFile.name}</span></p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-4 py-3 bg-primary-cta text-primary-cta-foreground rounded-md font-semibold text-lg transition-colors duration-300 ease-in-out hover:bg-primary-cta/90 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:ring-offset-2"
|
||||
>
|
||||
بارگذاری
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Pinterest-style Masonry Photo Feed */}
|
||||
<ProductCardFour
|
||||
title="گالری تصاویر"
|
||||
description="مجموعهای از تصاویر آپلود شده به سبک پینترست."
|
||||
tag="تصاویر برگزیده"
|
||||
tagIcon={ImageIcon}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "gallery-1", name: "منظره کوهستان", price: "", variant: "", imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg", imageAlt: "منظره کوهستان زیبا"
|
||||
},
|
||||
{
|
||||
id: "gallery-2", name: "معماری مدرن", price: "", variant: "", imageSrc: "https://img.b2bpic.net/free-photo/shanghai-night-china_1127-3170.jpg", imageAlt: "ساختمان مدرن شهر"
|
||||
},
|
||||
{
|
||||
id: "gallery-3", name: "نمای داخلی", price: "", variant: "", imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920926.jpg", imageAlt: "فضای داخلی لوکس"
|
||||
},
|
||||
{
|
||||
id: "gallery-4", name: "طبیعت بکر", price: "", variant: "", imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920931.jpg", imageAlt: "طبیعت سرسبز و آرام"
|
||||
},
|
||||
{
|
||||
id: "gallery-5", name: "غروب آفتاب", price: "", variant: "", imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg", imageAlt: "غروب خیره کننده آفتاب"
|
||||
},
|
||||
{
|
||||
id: "gallery-6", name: "شهر در شب", price: "", variant: "", imageSrc: "https://img.b2bpic.net/free-photo/shanghai-night-china_1127-3170.jpg", imageAlt: "نمای شبانه از شهر"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Our Services", href: "/#services" },
|
||||
{ label: "Executive Team", href: "/#team" },
|
||||
{ label: "Properties", href: "/#properties" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Upload Gallery", href: "/upload-gallery" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Investment Guide", href: "#" },
|
||||
{ label: "Market Reports", href: "#" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Blog", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "LinkedIn", href: "#" },
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "WhatsApp", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
|
||||
bottomRightText="Luxury Real Estate Excellence"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user