b
This commit is contained in:
@@ -0,0 +1,269 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { Event } from "@prisma/client";
|
||||
import { Plus, Edit2, Trash2, X, Save } from "lucide-react";
|
||||
import { loadMockEvents, addEvent, updateEvent, deleteEvent } from "@/app/actions/events";
|
||||
|
||||
export default function EventsClient({ events }: { events: Event[] }) {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingEvent, setEditingEvent] = useState<Event | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const openAddModal = () => {
|
||||
setEditingEvent(null);
|
||||
setError(null);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const openEditModal = (event: Event) => {
|
||||
setEditingEvent(event);
|
||||
setError(null);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setEditingEvent(null);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
if (confirm("Bu etkinliği silmek istediğinize emin misiniz?")) {
|
||||
startTransition(async () => {
|
||||
const result = await deleteEvent(id);
|
||||
if (result.error) {
|
||||
alert(result.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (formData: FormData) => {
|
||||
setError(null);
|
||||
if (editingEvent) {
|
||||
formData.append("id", editingEvent.id.toString());
|
||||
const result = await updateEvent(null, formData);
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
} else {
|
||||
closeModal();
|
||||
}
|
||||
} else {
|
||||
const result = await addEvent(null, formData);
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
} else {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-between items-center mb-10">
|
||||
<h1 className="text-4xl font-black font-serif text-dark tracking-tight">Etkinlikler</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<form action={loadMockEvents}>
|
||||
<button type="submit" className="bg-white text-dark border border-gray-200 px-6 py-2.5 rounded-xl font-bold tracking-wide hover:bg-gray-50 hover:shadow-lg transition-all text-sm flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
|
||||
Örnek Verileri Yükle
|
||||
</button>
|
||||
</form>
|
||||
<button
|
||||
onClick={openAddModal}
|
||||
className="bg-dark text-white px-6 py-2.5 rounded-xl font-bold tracking-wide hover:bg-dark/90 hover:shadow-lg transition-all text-sm flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Yeni Ekle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{events.length === 0 ? (
|
||||
<div className="bg-white rounded-3xl shadow-xl border border-gray-100 p-12 text-center text-gray-500 font-medium">
|
||||
Henüz etkinlik eklenmemiş. Sağ üstten yeni ekleyebilir veya örnek verileri yükleyebilirsiniz.
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden animate-fade-up">
|
||||
<table className="w-full text-left text-sm text-gray-600">
|
||||
<thead className="bg-gray-50/50 border-b border-gray-100 text-gray-500 uppercase tracking-widest text-[10px] font-bold">
|
||||
<tr>
|
||||
<th className="px-8 py-5">Etkinlik Adı</th>
|
||||
<th className="px-8 py-5">Dil</th>
|
||||
<th className="px-8 py-5">Tarih</th>
|
||||
<th className="px-8 py-5 text-right">İşlemler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{events.map(ev => (
|
||||
<tr key={ev.id} className="hover:bg-gray-50/80 transition-colors group">
|
||||
<td className="px-8 py-5 font-bold text-dark">{ev.title}</td>
|
||||
<td className="px-8 py-5">
|
||||
<span className="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-[10px] uppercase font-black tracking-widest border border-gray-200">{ev.lang}</span>
|
||||
</td>
|
||||
<td className="px-8 py-5 font-medium">{ev.date} {ev.time}</td>
|
||||
<td className="px-8 py-5 text-right">
|
||||
<div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => openEditModal(ev)}
|
||||
className="p-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors"
|
||||
title="Düzenle"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(ev.id)}
|
||||
disabled={isPending}
|
||||
className="p-2 bg-red-500/10 text-red-500 rounded-lg hover:bg-red-500/20 transition-colors disabled:opacity-50"
|
||||
title="Sil"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-dark/60 backdrop-blur-sm" onClick={closeModal} />
|
||||
|
||||
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-2xl relative z-10 animate-fade-up overflow-hidden max-h-[90vh] flex flex-col">
|
||||
<div className="flex justify-between items-center p-6 md:p-8 border-b border-gray-100 bg-gray-50/50">
|
||||
<h2 className="text-2xl font-bold font-serif text-dark">
|
||||
{editingEvent ? "Etkinlik Düzenle" : "Yeni Etkinlik Ekle"}
|
||||
</h2>
|
||||
<button onClick={closeModal} className="p-2 text-gray-400 hover:text-dark hover:bg-gray-200 rounded-full transition-colors">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 md:p-8 overflow-y-auto">
|
||||
<form action={handleSubmit} className="space-y-6">
|
||||
|
||||
{error && (
|
||||
<div className="p-4 bg-red-50 border border-red-200 rounded-xl text-red-600 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Dil</label>
|
||||
<select
|
||||
name="lang"
|
||||
defaultValue={editingEvent?.lang || "tr"}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300"
|
||||
>
|
||||
<option value="tr">Türkçe</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Etkinlik Adı</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
defaultValue={editingEvent?.title || ""}
|
||||
required
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Açıklama</label>
|
||||
<textarea
|
||||
name="description"
|
||||
defaultValue={editingEvent?.description || ""}
|
||||
required
|
||||
rows={3}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Tarih</label>
|
||||
<input
|
||||
type="text"
|
||||
name="date"
|
||||
defaultValue={editingEvent?.date || ""}
|
||||
required
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300"
|
||||
placeholder="Örn: 15 Ağustos 2026"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Saat</label>
|
||||
<input
|
||||
type="text"
|
||||
name="time"
|
||||
defaultValue={editingEvent?.time || ""}
|
||||
required
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300"
|
||||
placeholder="Örn: 18:00"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Lokasyon</label>
|
||||
<input
|
||||
type="text"
|
||||
name="location"
|
||||
defaultValue={editingEvent?.location || ""}
|
||||
required
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300"
|
||||
placeholder="Örn: Beach Club"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Rozet (Opsiyonel)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="badge"
|
||||
defaultValue={editingEvent?.badge || ""}
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300"
|
||||
placeholder="Örn: Yaklaşan Etkinlik"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<label className="block text-xs font-bold text-gray-500 tracking-wider uppercase mb-2">Görsel URL</label>
|
||||
<input
|
||||
type="url"
|
||||
name="image"
|
||||
defaultValue={editingEvent?.image || ""}
|
||||
required
|
||||
className="w-full px-5 py-3.5 bg-gray-50 border border-gray-200 text-dark rounded-xl focus:ring-4 focus:ring-primary/20 focus:border-primary outline-none transition-all hover:border-gray-300"
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-6 mt-6 border-t border-gray-100">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex items-center gap-2 bg-accent text-white font-bold tracking-widest uppercase py-4 px-8 rounded-xl hover:bg-accent/90 transition-all shadow-lg shadow-accent/20 text-sm"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
Kaydet
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user