110 lines
6.2 KiB
JavaScript
110 lines
6.2 KiB
JavaScript
import React from 'react'
|
||
import { Head, Link, router, usePage } from '@inertiajs/react'
|
||
import AdminLayout from '../../../Layouts/AdminLayout'
|
||
import HomepageAnnouncement from '../../../components/homepage/HomepageAnnouncement'
|
||
|
||
function formatDateRange(startsAt, endsAt) {
|
||
const formatter = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
|
||
const start = startsAt ? formatter.format(new Date(startsAt)) : 'Now'
|
||
const end = endsAt ? formatter.format(new Date(endsAt)) : 'Open ended'
|
||
return `${start} → ${end}`
|
||
}
|
||
|
||
function StatusBadge({ status, active }) {
|
||
const tone = status === 'published'
|
||
? 'border-emerald-300/20 bg-emerald-300/10 text-emerald-100'
|
||
: status === 'archived'
|
||
? 'border-amber-300/20 bg-amber-300/10 text-amber-100'
|
||
: 'border-slate-300/15 bg-slate-300/10 text-slate-200'
|
||
|
||
return (
|
||
<span className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${tone}`}>
|
||
<span className={`h-2 w-2 rounded-full ${active ? 'bg-emerald-300' : 'bg-slate-500'}`} />
|
||
{status}
|
||
</span>
|
||
)
|
||
}
|
||
|
||
export default function HomepageAnnouncementsIndex({ announcements, createUrl }) {
|
||
const { props } = usePage()
|
||
const flash = props.flash ?? {}
|
||
|
||
return (
|
||
<AdminLayout title="Homepage Announcements" subtitle="Schedule launch cards, homepage notices, and editorial announcements below the featured artwork hero.">
|
||
<Head title="Admin · Homepage Announcements" />
|
||
|
||
{flash.success ? <div className="mb-6 rounded-2xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-100">{flash.success}</div> : null}
|
||
{flash.error ? <div className="mb-6 rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100">{flash.error}</div> : null}
|
||
|
||
<div className="mb-6 flex items-center justify-between gap-4">
|
||
<div className="max-w-2xl text-sm leading-6 text-slate-400">
|
||
Only the highest-priority published announcement that is active and inside its visibility window appears on the homepage.
|
||
</div>
|
||
<Link href={createUrl} className="rounded-full border border-sky-300/20 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-300/18">
|
||
Create announcement
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{(announcements?.data || []).length === 0 ? (
|
||
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] px-6 py-10 text-center text-slate-400">
|
||
No homepage announcements exist yet.
|
||
</div>
|
||
) : (announcements.data.map((announcement) => (
|
||
<article key={announcement.id} className="overflow-hidden rounded-[30px] border border-white/10 bg-white/[0.03]">
|
||
<div className="grid gap-6 border-b border-white/8 px-6 py-6 lg:grid-cols-[minmax(0,1.2fr)_auto] lg:items-start">
|
||
<div>
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<StatusBadge status={announcement.status} active={announcement.is_active} />
|
||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">{announcement.type}</span>
|
||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Priority {announcement.priority}</span>
|
||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Dismiss v{announcement.dismiss_version}</span>
|
||
</div>
|
||
<h2 className="mt-4 text-2xl font-semibold tracking-[-0.04em] text-white">{announcement.title}</h2>
|
||
<p className="mt-2 text-sm text-slate-400">{formatDateRange(announcement.starts_at, announcement.ends_at)}</p>
|
||
<p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">{announcement.placement.replaceAll('_', ' ')}</p>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-3 lg:justify-end">
|
||
<Link href={announcement.edit_url} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Edit</Link>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (!window.confirm('Delete this homepage announcement?')) return
|
||
router.delete(announcement.destroy_url, { preserveScroll: true })
|
||
}}
|
||
className="rounded-full border border-rose-300/20 bg-rose-300/10 px-4 py-2 text-sm font-semibold text-rose-100 transition hover:bg-rose-300/16"
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-black/10 py-2">
|
||
<HomepageAnnouncement announcement={announcement.preview} mode="preview" />
|
||
</div>
|
||
</article>
|
||
))) }
|
||
</div>
|
||
|
||
{announcements?.last_page > 1 ? (
|
||
<div className="mt-8 flex items-center justify-between gap-4">
|
||
<p className="text-xs text-slate-500">Showing {announcements.from}–{announcements.to} of {announcements.total} announcements</p>
|
||
<div className="flex gap-2">
|
||
{announcements.links.map((link, index) => (
|
||
link.url ? (
|
||
<button
|
||
key={`${link.label}-${index}`}
|
||
type="button"
|
||
onClick={() => router.get(link.url, {}, { preserveScroll: true })}
|
||
className={`rounded-lg px-3 py-1.5 text-xs transition ${link.active ? 'bg-sky-300/15 text-sky-100' : 'bg-white/[0.04] text-slate-400 hover:bg-white/[0.08] hover:text-white'}`}
|
||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||
/>
|
||
) : <span key={`${link.label}-${index}`} className="rounded-lg px-3 py-1.5 text-xs text-slate-600" dangerouslySetInnerHTML={{ __html: link.label }} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</AdminLayout>
|
||
)
|
||
} |