70 lines
3.7 KiB
JavaScript
70 lines
3.7 KiB
JavaScript
import React from 'react'
|
|
import { usePage } from '@inertiajs/react'
|
|
import SeoHead from '../../components/seo/SeoHead'
|
|
|
|
function csrfToken() {
|
|
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
|
}
|
|
|
|
export default function GroupPostShow() {
|
|
const { props } = usePage()
|
|
const group = props.group || {}
|
|
const post = props.post || {}
|
|
const recentPosts = Array.isArray(props.recentPosts) ? props.recentPosts : []
|
|
|
|
const submitReport = async () => {
|
|
if (!props.reportEndpoint || !post.id) return
|
|
|
|
const reason = window.prompt('Reason for reporting this post?')
|
|
if (!reason) return
|
|
|
|
await fetch(props.reportEndpoint, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-TOKEN': csrfToken(),
|
|
},
|
|
body: JSON.stringify({ target_type: 'group_post', target_id: post.id, reason }),
|
|
})
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_28%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
|
|
<SeoHead seo={props.seo || {}} title={`${post.title || group.name} - Skinbase`} description={post.excerpt || group.headline || group.bio || 'Group post'} />
|
|
<div className="mx-auto max-w-5xl">
|
|
<article className="rounded-[32px] border border-white/10 bg-white/[0.03] p-6 sm:p-8">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<a href={group.urls?.public} className="text-sm font-semibold text-sky-200">← Back to {group.name}</a>
|
|
{props.reportEndpoint ? <button type="button" onClick={submitReport} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-sm font-semibold text-white">Report</button> : null}
|
|
</div>
|
|
<div className="mt-4 flex flex-wrap gap-2 text-xs uppercase tracking-[0.16em] text-slate-400">
|
|
{post.type ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">{post.type}</span> : null}
|
|
{post.is_pinned ? <span className="rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-amber-100">Pinned</span> : null}
|
|
</div>
|
|
<h1 className="mt-5 text-4xl font-semibold text-white">{post.title}</h1>
|
|
<div className="mt-3 text-sm text-slate-400">{post.author?.name || post.author?.username || group.name} • {post.published_at ? new Date(post.published_at).toLocaleString() : 'Recently'}</div>
|
|
{post.excerpt ? <p className="mt-6 text-lg leading-8 text-slate-200">{post.excerpt}</p> : null}
|
|
<div className="mt-8 whitespace-pre-wrap text-sm leading-7 text-slate-300">{post.content || ''}</div>
|
|
</article>
|
|
|
|
{recentPosts.length > 0 ? (
|
|
<section className="mt-8 rounded-[32px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">More from {group.name}</h2>
|
|
<div className="mt-4 grid gap-4 md:grid-cols-2">
|
|
{recentPosts.filter((item) => item.id !== post.id).map((item) => (
|
|
<a key={item.id} href={item.url} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.type}</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{item.title}</div>
|
|
<p className="mt-2 text-sm text-slate-400">{item.excerpt || 'Read the full post.'}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
</div>
|
|
</main>
|
|
)
|
|
} |