75 lines
3.8 KiB
JavaScript
75 lines
3.8 KiB
JavaScript
import React from 'react'
|
||
import { Head, router } from '@inertiajs/react'
|
||
import AdminLayout from '../../Layouts/AdminLayout'
|
||
|
||
export default function AdminStories({ stories }) {
|
||
const items = stories?.data ?? []
|
||
|
||
return (
|
||
<AdminLayout title="Stories" subtitle="Review all stories submitted by creators">
|
||
<Head title="Admin · Stories" />
|
||
|
||
<div className="overflow-hidden rounded-2xl border border-white/[0.07] bg-white/[0.02]">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b border-white/[0.07] text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
||
<th className="px-5 py-3.5">Title</th>
|
||
<th className="px-5 py-3.5">Author</th>
|
||
<th className="px-5 py-3.5">Status</th>
|
||
<th className="px-5 py-3.5">Published</th>
|
||
<th className="px-5 py-3.5 text-right">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-white/[0.04]">
|
||
{items.length === 0 && (
|
||
<tr><td colSpan={5} className="px-5 py-12 text-center text-slate-500">No stories found.</td></tr>
|
||
)}
|
||
{items.map((story) => (
|
||
<tr key={story.id} className="transition hover:bg-white/[0.025]">
|
||
<td className="px-5 py-4 font-medium text-white">{story.title || <span className="italic text-slate-500">Untitled</span>}</td>
|
||
<td className="px-5 py-4 text-slate-400">{story.creator?.name ?? '—'}</td>
|
||
<td className="px-5 py-4">
|
||
<span className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ${
|
||
story.status === 'published' ? 'bg-teal-500/20 text-teal-300'
|
||
: story.status === 'pending_review' ? 'bg-amber-500/20 text-amber-300'
|
||
: 'bg-slate-500/20 text-slate-400'
|
||
}`}>{story.status?.replace('_', ' ') ?? 'draft'}</span>
|
||
</td>
|
||
<td className="px-5 py-4 text-slate-500">
|
||
{story.published_at ? new Date(story.published_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }) : '—'}
|
||
</td>
|
||
<td className="px-5 py-4 text-right">
|
||
<a
|
||
href={`/studio/stories/${story.id}/edit`}
|
||
className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-white/70 transition hover:bg-white/[0.09]"
|
||
>
|
||
Edit
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{stories?.last_page > 1 && (
|
||
<div className="flex items-center justify-between border-t border-white/[0.06] px-5 py-4">
|
||
<p className="text-xs text-slate-500">Showing {stories.from}–{stories.to} of {stories.total} stories</p>
|
||
<div className="flex gap-1">
|
||
{stories.links.map((link, i) => (
|
||
link.url ? (
|
||
<button key={i} type="button" onClick={() => router.get(link.url, {}, { preserveScroll: true })}
|
||
className={`rounded-lg px-3 py-1.5 text-xs transition ${link.active ? 'bg-rose-500/20 font-semibold text-rose-300' : 'text-slate-500 hover:bg-white/[0.06] hover:text-white'}`}
|
||
dangerouslySetInnerHTML={{ __html: link.label }} />
|
||
) : (
|
||
<span key={i} className="rounded-lg px-3 py-1.5 text-xs text-slate-700" dangerouslySetInnerHTML={{ __html: link.label }} />
|
||
)
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</AdminLayout>
|
||
)
|
||
}
|