220 lines
9.6 KiB
TypeScript
220 lines
9.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { ImageIcon, X, Search, CheckCircle2 } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { databases, APPWRITE_ALMEIRA_CONFIG, endpoint, projectId } from '@/lib/appwrite';
|
|
import { Query } from 'appwrite';
|
|
|
|
interface MediaPickerMiniProps {
|
|
value: string;
|
|
onChange: (fileId: string) => void;
|
|
label: string;
|
|
}
|
|
|
|
export const MediaPickerMini = ({ value, onChange, label }: MediaPickerMiniProps) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [mediaItems, setMediaItems] = useState<any[]>([]);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
fetchMedia();
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const fetchMedia = async (search = '') => {
|
|
setIsLoading(true);
|
|
try {
|
|
// We use the client-side databases instance for browsing media
|
|
const queries = [
|
|
Query.limit(20), // Standard limit for preview
|
|
Query.orderDesc('$createdAt')
|
|
];
|
|
|
|
if (search) {
|
|
queries.push(Query.contains('titulo', search));
|
|
}
|
|
|
|
const res = await databases.listDocuments(
|
|
APPWRITE_ALMEIRA_CONFIG.databaseId,
|
|
'media',
|
|
queries
|
|
);
|
|
setMediaItems(res.documents);
|
|
} catch (error) {
|
|
console.error('Error fetching media:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Debounced search
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
const timer = setTimeout(() => {
|
|
fetchMedia(searchTerm);
|
|
}, 500);
|
|
return () => clearTimeout(timer);
|
|
}, [searchTerm, isOpen]);
|
|
|
|
const getImageUrl = (fileId: string) => {
|
|
return `${endpoint}/storage/buckets/media/files/${fileId}/view?project=${projectId}&width=200&height=200&gravity=center`;
|
|
};
|
|
|
|
const filteredItems = mediaItems;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 flex items-center gap-1">
|
|
<ImageIcon size={12} className="text-purple-500" /> {label}
|
|
</label>
|
|
{value && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange('')}
|
|
className="text-[9px] font-bold text-pink-500 hover:text-pink-400 transition-colors uppercase"
|
|
>
|
|
Quitar
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => setIsOpen(true)}
|
|
className={`relative aspect-video rounded-2xl border-2 border-dashed transition-all cursor-pointer flex flex-col items-center justify-center gap-2 overflow-hidden bg-slate-950 group ${
|
|
value ? 'border-cyan-500/50 hover:border-cyan-400' : 'border-slate-800 hover:border-slate-700'
|
|
}`}
|
|
>
|
|
{value ? (
|
|
<>
|
|
<img
|
|
src={`${endpoint}/storage/buckets/media/files/${value}/view?project=${projectId}`}
|
|
alt="Selected"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<span className="bg-white/10 backdrop-blur-md px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-[0.2em] text-white border border-white/20 shadow-xl">
|
|
Cambiar Imagen
|
|
</span>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="p-3 bg-slate-900 rounded-2xl text-slate-600 group-hover:text-cyan-500 transition-colors border border-slate-800 group-hover:border-cyan-500/30">
|
|
<ImageIcon size={24} />
|
|
</div>
|
|
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Seleccionar Medio</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Hidden input to carry the value in the form */}
|
|
<input type="hidden" name="imagen_destacada_id" value={value || ''} />
|
|
|
|
{/* Modal */}
|
|
{isOpen && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8 animate-in fade-in duration-200">
|
|
<div className="absolute inset-0 bg-slate-950/80 backdrop-blur-md" onClick={() => setIsOpen(false)}></div>
|
|
|
|
<div className="relative w-full max-w-4xl max-h-[80vh] bg-slate-900 border border-slate-800 rounded-3xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200">
|
|
{/* Modal Header */}
|
|
<div className="p-6 border-b border-slate-800 flex items-center justify-between bg-slate-900/50">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-purple-500/10 rounded-xl text-purple-400 border border-purple-500/20">
|
|
<ImageIcon size={20} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-black uppercase tracking-tighter text-white">Biblioteca de Medios</h3>
|
|
<p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Selecciona una imagen para esta publicación</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsOpen(false)}
|
|
className="p-2 hover:bg-slate-800 rounded-xl text-slate-500 hover:text-white transition-all"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Modal Search */}
|
|
<div className="p-6 pb-2">
|
|
<div className="relative group">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-cyan-500 transition-colors" size={18} />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar por título..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-2xl pl-12 pr-6 py-4 text-white focus:outline-none focus:border-cyan-500 transition-all font-medium"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal Content */}
|
|
<div className="flex-1 overflow-y-auto p-6 pt-2 custom-scrollbar">
|
|
{isLoading ? (
|
|
<div className="h-64 flex flex-col items-center justify-center gap-4">
|
|
<div className="w-12 h-12 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin"></div>
|
|
<span className="text-xs font-black uppercase tracking-widest text-slate-500">Cargando Galería...</span>
|
|
</div>
|
|
) : filteredItems.length > 0 ? (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
{filteredItems.map((item) => (
|
|
<div
|
|
key={item.$id}
|
|
onClick={() => {
|
|
onChange(item.file_id);
|
|
setIsOpen(false);
|
|
}}
|
|
className={`group relative aspect-square rounded-2xl border-2 transition-all cursor-pointer overflow-hidden bg-slate-950 ${
|
|
value === item.file_id ? 'border-cyan-500 shadow-xl shadow-cyan-500/20' : 'border-slate-800 hover:border-slate-600 shadow-lg'
|
|
}`}
|
|
>
|
|
<img
|
|
src={getImageUrl(item.file_id)}
|
|
alt={item.titulo}
|
|
title={item.titulo}
|
|
className="w-full h-full object-cover transition-transform group-hover:scale-110"
|
|
loading="lazy"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity p-3 flex flex-col justify-end">
|
|
<span className="text-[10px] font-black text-white uppercase truncate drop-shadow-lg">{item.titulo}</span>
|
|
</div>
|
|
{value === item.file_id && (
|
|
<div className="absolute top-2 right-2 bg-cyan-500 text-white rounded-full p-1 shadow-lg">
|
|
<CheckCircle2 size={16} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="h-64 flex flex-col items-center justify-center text-slate-500 border-2 border-dashed border-slate-800 rounded-3xl gap-2">
|
|
<p className="font-bold uppercase tracking-widest text-sm text-slate-400">Sin Resultados</p>
|
|
<p className="text-[10px]">No encontramos imágenes con ese título.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modal Footer */}
|
|
<div className="p-6 bg-slate-950/50 border-t border-slate-800 flex justify-between items-center text-slate-500">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest">
|
|
{filteredItems.length} Elementos Disponibles
|
|
</span>
|
|
<Link
|
|
href="/dashboard/media/new"
|
|
className="text-[10px] font-black uppercase tracking-widest bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-lg transition-all border border-slate-700"
|
|
>
|
|
Subir Nuevo Archivo
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|