Spaces:
Sleeping
Sleeping
File size: 5,936 Bytes
326d002 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | import { useState, useEffect } from 'react';
const COLORS = [
{ name: 'blue', label: 'Azul', class: 'bg-blue-500' },
{ name: 'green', label: 'Verde', class: 'bg-green-500' },
{ name: 'red', label: 'Rojo', class: 'bg-red-500' },
{ name: 'purple', label: 'Morado', class: 'bg-purple-500' },
{ name: 'orange', label: 'Naranja', class: 'bg-orange-500' },
{ name: 'pink', label: 'Rosa', class: 'bg-pink-500' },
];
export default function EventModal({ isOpen, onClose, onSave, selectedDate, editEvent }) {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [time, setTime] = useState('');
const [color, setColor] = useState('blue');
const [date, setDate] = useState('');
useEffect(() => {
if (editEvent) {
setTitle(editEvent.title);
setDescription(editEvent.description || '');
setTime(editEvent.time || '');
setColor(editEvent.color);
setDate(editEvent.date);
} else {
setTitle('');
setDescription('');
setTime('');
setColor('blue');
setDate(selectedDate || '');
}
}, [editEvent, selectedDate, isOpen]);
const handleSubmit = (e) => {
e.preventDefault();
if (!title.trim() || !date) return;
onSave({
id: editEvent?.id || null,
title: title.trim(),
description: description.trim(),
time,
color,
date,
});
onClose();
};
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
{/* Backdrop */}
<div
className="fixed inset-0 bg-slate-900 bg-opacity-50 transition-opacity"
onClick={onClose}
></div>
{/* Modal */}
<div className="relative bg-white rounded-2xl shadow-2xl max-w-md w-full mx-auto z-10 transform transition-all">
<div className="p-6">
{/* Header */}
<div className="flex items-center justify-between mb-6">
<h3 className="text-xl font-bold text-slate-800">
{editEvent ? 'Editar Evento' : 'Nuevo Evento'}
</h3>
<button
onClick={onClose}
className="p-2 hover:bg-slate-100 rounded-lg transition-colors duration-200"
>
<svg className="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{/* Form */}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
Título del evento *
</label>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
className="input-field"
placeholder="Ej: Reunión de trabajo"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
Fecha *
</label>
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
className="input-field"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
Hora
</label>
<input
type="time"
value={time}
onChange={(e) => setTime(e.target.value)}
className="input-field"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
Descripción
</label>
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
className="input-field resize-none"
rows={3}
placeholder="Añade detalles sobre el evento..."
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">
Color
</label>
<div className="flex gap-2">
{COLORS.map((c) => (
<button
key={c.name}
type="button"
onClick={() => setColor(c.name)}
className={`w-8 h-8 rounded-full ${c.class} transition-all duration-200
${color === c.name
? 'ring-2 ring-offset-2 ring-slate-400 scale-110'
: 'hover:scale-105'
}
`}
title={c.label}
/>
))}
</div>
</div>
{/* Actions */}
<div className="flex gap-3 pt-4">
<button
type="button"
onClick={onClose}
className="btn-secondary flex-1"
>
Cancelar
</button>
<button
type="submit"
className="btn-primary flex-1"
>
{editEvent ? 'Guardar Cambios' : 'Crear Evento'}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
} |