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 ( {status} ) } export default function HomepageAnnouncementsIndex({ announcements, createUrl }) { const { props } = usePage() const flash = props.flash ?? {} return ( {flash.success ?
{flash.success}
: null} {flash.error ?
{flash.error}
: null}
Only the highest-priority published announcement that is active and inside its visibility window appears on the homepage.
Create announcement
{(announcements?.data || []).length === 0 ? (
No homepage announcements exist yet.
) : (announcements.data.map((announcement) => (
{announcement.type} Priority {announcement.priority} Dismiss v{announcement.dismiss_version}

{announcement.title}

{formatDateRange(announcement.starts_at, announcement.ends_at)}

{announcement.placement.replaceAll('_', ' ')}

Edit
))) }
{announcements?.last_page > 1 ? (

Showing {announcements.from}–{announcements.to} of {announcements.total} announcements

{announcements.links.map((link, index) => ( link.url ? (
) : null} ) }