Files
marmarislocal/app/[locale]/admin/events/page.tsx
T

118 lines
5.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { mockDb } from '@/lib/mockDb'
import { deleteEventAction } from '@/app/actions'
import { Link } from '@/i18n/routing'
import { Edit, Trash, Plus, Calendar, CheckCircle } from 'lucide-react'
export default async function AdminEventsPage() {
const events = await mockDb.getEvents()
return (
<div className="space-y-6">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h2 className="text-3xl font-heading font-extrabold text-pine lowercase">etkinlikler</h2>
<p className="text-ink/65 text-xs font-medium mt-1">
Canlı müzik, caz, festival ve gastronomi günlerinin yönetimi.
</p>
</div>
<Link
href="/admin/events/new"
className="inline-flex items-center gap-1.5 bg-turquoise hover:bg-turquoise/90 text-paper text-xs font-bold py-3 px-5 rounded-xl shadow-sm transition active:scale-95 duration-150"
>
<Plus className="w-4 h-4" />
Yeni Etkinlik Ekle
</Link>
</div>
{/* Events Table */}
<div className="bg-paper border border-pine/8 rounded-2xl shadow-sm overflow-hidden">
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-pine/8 text-sm">
<thead className="bg-stone-deep/40 text-shutter font-mono text-[10px] uppercase tracking-wider">
<tr>
<th className="px-6 py-4 text-left">Başlık</th>
<th className="px-6 py-4 text-left">Mekan</th>
<th className="px-6 py-4 text-left">Tarih</th>
<th className="px-6 py-4 text-left">Öne Çıkarılan</th>
<th className="px-6 py-4 text-right">Aksiyonlar</th>
</tr>
</thead>
<tbody className="divide-y divide-dashed divide-pine/8 text-ink/80">
{events.length === 0 ? (
<tr>
<td colSpan={5} className="px-6 py-12 text-center text-xs text-shutter font-medium">
Kayıtlı etkinlik bulunmuyor.
</td>
</tr>
) : (
events.map((e) => {
return (
<tr key={e.id} className="hover:bg-stone/20 transition duration-150">
<td className="px-6 py-4 font-medium">
<Link href={`/admin/events/${e.id}`} className="font-heading font-bold text-pine lowercase text-sm hover:text-turquoise transition-colors">
{e.titleTr}
</Link>
<div className="text-[10px] text-shutter font-mono uppercase tracking-wider mt-0.5">{e.slug}</div>
</td>
<td className="px-6 py-4 text-xs font-semibold text-pine">
{e.listing ? e.listing.nameTr : '-'}
</td>
<td className="px-6 py-4 font-mono text-xs">
<div className="flex items-center gap-1">
<Calendar className="w-3.5 h-3.5 text-shutter/60" />
{new Date(e.startDate).toLocaleDateString('tr-TR', {
day: 'numeric',
month: 'short',
hour: '2-digit',
minute: '2-digit'
})}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
{e.isSponsored ? (
<span className="inline-flex items-center gap-1 rounded-full bg-paper px-2.5 py-0.5 text-[10px] font-mono font-bold text-turquoise border border-turquoise/20 uppercase tracking-wider">
<CheckCircle className="w-3.5 h-3.5" />
Sponsorlu
</span>
) : (
<span className="inline-flex items-center gap-1 rounded-full bg-paper px-2.5 py-0.5 text-[10px] font-mono font-medium text-shutter/60 border border-pine/8 uppercase tracking-wider">
Normal
</span>
)}
</td>
<td className="px-6 py-4 text-right whitespace-nowrap">
<div className="flex justify-end gap-2">
<Link
href={`/admin/events/${e.id}`}
className="p-1.5 bg-paper text-shutter hover:text-turquoise hover:bg-turquoise/5 rounded-lg border border-pine/10 hover:border-turquoise/25 transition shadow-sm"
title="Düzenle"
>
<Edit className="w-4 h-4" />
</Link>
<form action={async () => {
'use server'
await deleteEventAction(e.id)
}}>
<button
type="submit"
className="p-1.5 bg-paper text-shutter hover:text-bougainvillea hover:bg-bougainvillea/5 rounded-lg border border-pine/10 hover:border-bougainvillea/25 transition shadow-sm"
title="Sil"
>
<Trash className="w-4 h-4" />
</button>
</form>
</div>
</td>
</tr>
)
})
)}
</tbody>
</table>
</div>
</div>
</div>
)
}