88 lines
4.8 KiB
JavaScript
88 lines
4.8 KiB
JavaScript
import React from 'react'
|
|
import { Head, Link } from '@inertiajs/react'
|
|
import AdminLayout from '../../../Layouts/AdminLayout'
|
|
|
|
function formatDateTime(value) {
|
|
if (!value) return '—'
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return '—'
|
|
return new Intl.DateTimeFormat('en', { dateStyle: 'medium', timeStyle: 'short' }).format(date)
|
|
}
|
|
|
|
function Field({ label, children }) {
|
|
return (
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">{label}</div>
|
|
<div className="mt-2 text-sm leading-7 text-slate-100">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function StaffApplicationShow({ title, item, backUrl }) {
|
|
const payload = item?.payload || {}
|
|
|
|
return (
|
|
<AdminLayout title={title || 'Staff Application'} subtitle="Read the full submission in a moderation-friendly layout.">
|
|
<Head title="Moderation · Staff Application" />
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.12),transparent_34%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/80">Moderation surface</p>
|
|
<h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{item?.name || 'Staff application'}</h1>
|
|
<p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-300">Topic: {String(item?.topic || 'contact').replaceAll('_', ' ')} • Received {formatDateTime(item?.created_at)}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<Link href={backUrl} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-5 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09]">
|
|
Back
|
|
</Link>
|
|
{item?.email ? (
|
|
<a href={`mailto:${item.email}`} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/12 px-5 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-sky-50 transition hover:bg-sky-400/18">
|
|
Email
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="mt-8 grid gap-6 xl:grid-cols-[1.35fr_0.85fr]">
|
|
<div className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="Name">{item?.name || '—'}</Field>
|
|
<Field label="Email">{item?.email || '—'}</Field>
|
|
<Field label="Role">{item?.role || '—'}</Field>
|
|
<Field label="Portfolio">{item?.portfolio ? <a href={item.portfolio} className="text-sky-300 hover:text-sky-200" target="_blank" rel="noreferrer">{item.portfolio}</a> : '—'}</Field>
|
|
</div>
|
|
|
|
<div className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Message</div>
|
|
<div className="mt-3 whitespace-pre-wrap rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-4 text-sm leading-7 text-slate-100">
|
|
{item?.message || 'No message included.'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside className="space-y-4">
|
|
<div className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Metadata</div>
|
|
<div className="mt-4 space-y-3 text-sm text-slate-200">
|
|
<div><span className="font-semibold text-white">Received:</span> {formatDateTime(item?.created_at)}</div>
|
|
<div><span className="font-semibold text-white">IP:</span> {item?.ip || '—'}</div>
|
|
<div><span className="font-semibold text-white">User agent:</span> {item?.user_agent || '—'}</div>
|
|
<div><span className="font-semibold text-white">ID:</span> {item?.id || '—'}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Payload</div>
|
|
<pre className="mt-3 max-h-[420px] overflow-auto rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-4 text-xs leading-6 text-slate-200">
|
|
{JSON.stringify(payload, null, 2)}
|
|
</pre>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</AdminLayout>
|
|
)
|
|
}
|