feat: implement event submission flow with image upload and modal interface
This commit is contained in:
@@ -13,6 +13,8 @@ interface HomeSlide {
|
||||
subtitle?: string | null;
|
||||
imageUrl?: string | null;
|
||||
linkUrl?: string | null;
|
||||
coverPosition?: string | null;
|
||||
coverZoom?: number | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -85,10 +87,15 @@ const HomeSlider = ({ slides, onSearch }: Props) => {
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
src={slide.imageUrl || slide.business?.coverUrl || slide.business?.logoUrl || ''}
|
||||
className={`w-full h-full object-cover transition-transform duration-[6000ms] ease-linear ${
|
||||
index === current ? 'scale-110' : 'scale-100'
|
||||
}`}
|
||||
alt=""
|
||||
style={{
|
||||
objectPosition: slide.type === 'BUSINESS' ? (slide.business?.coverPosition || '50% 50%') : (slide.coverPosition || '50% 50%'),
|
||||
transformOrigin: slide.type === 'BUSINESS' ? (slide.business?.coverPosition || '50% 50%') : (slide.coverPosition || '50% 50%'),
|
||||
'--base-zoom': slide.type === 'BUSINESS' ? (slide.business?.coverZoom || 1) : (slide.coverZoom || 1)
|
||||
} as any}
|
||||
className={`w-full h-full object-cover transition-transform duration-[6000ms] ease-linear ${
|
||||
index === current ? 'scale-[calc(var(--base-zoom)*1.1)]' : 'scale-[var(--base-zoom)]'
|
||||
}`}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent" />
|
||||
</div>
|
||||
|
||||
99
components/LightboxImage.tsx
Normal file
99
components/LightboxImage.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, Maximize2 } from 'lucide-react';
|
||||
|
||||
interface LightboxImageProps {
|
||||
src: string;
|
||||
alt: string;
|
||||
position?: string;
|
||||
zoom?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function LightboxImage({
|
||||
src,
|
||||
alt,
|
||||
position = "50% 50%",
|
||||
zoom = 1,
|
||||
className = "w-full h-full object-cover"
|
||||
}: LightboxImageProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
// Close on Escape key
|
||||
useEffect(() => {
|
||||
const handleEsc = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') setIsOpen(false);
|
||||
};
|
||||
window.addEventListener('keydown', handleEsc);
|
||||
return () => window.removeEventListener('keydown', handleEsc);
|
||||
}, []);
|
||||
|
||||
// Prevent scroll when open
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
return () => { document.body.style.overflow = 'unset'; };
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="relative group cursor-zoom-in w-full h-full overflow-hidden"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className={className}
|
||||
style={{
|
||||
objectPosition: position,
|
||||
transform: `scale(${zoom})`,
|
||||
transformOrigin: position
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
|
||||
<div className="bg-white/20 backdrop-blur-md p-3 rounded-full text-white scale-90 group-hover:scale-100 transition-all">
|
||||
<Maximize2 className="w-6 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lightbox Overlay */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center p-4 md:p-12 animate-in fade-in duration-300"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<button
|
||||
className="absolute top-6 right-6 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-colors z-[10000]"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
|
||||
<div
|
||||
className="relative w-full h-full flex items-center justify-center cursor-zoom-out"
|
||||
>
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="max-w-full max-h-full object-contain shadow-2xl animate-in zoom-in-95 duration-300"
|
||||
/>
|
||||
|
||||
{/* Legend / Caption */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent text-white text-center">
|
||||
<p className="text-lg font-medium">{alt}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -171,10 +171,10 @@ export default function CreateEventModal({ isOpen, onClose }: CreateEventModalPr
|
||||
<ImageIcon className="w-10 h-10 text-gray-300 mb-2" />
|
||||
)}
|
||||
<p className="text-sm font-medium text-gray-500">Cliquez pour ajouter une image</p>
|
||||
<p className="text-xs text-gray-400 mt-1">PNG, JPG jusqu'à 2Mo</p>
|
||||
<p className="text-xs text-gray-400 mt-1">PNG, JPG, JPEG jusqu'à 5Mo</p>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
accept="image/png, image/jpeg, image/jpg, image/webp"
|
||||
onChange={handleImageChange}
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
/>
|
||||
|
||||
@@ -170,10 +170,10 @@ export default function CreateNewsModal({ isOpen, onClose }: CreateNewsModalProp
|
||||
<ImageIcon className="w-10 h-10 text-gray-300 mb-2" />
|
||||
)}
|
||||
<p className="text-sm font-medium text-gray-500">Cliquez pour ajouter une image</p>
|
||||
<p className="text-xs text-gray-400 mt-1">PNG, JPG jusqu'à 2Mo</p>
|
||||
<p className="text-xs text-gray-400 mt-1">PNG, JPG, JPEG jusqu'à 5Mo</p>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
accept="image/png, image/jpeg, image/jpg, image/webp"
|
||||
onChange={handleImageChange}
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user