Commit workspace changes

resources/js/Pages/Group/GroupPostShow.jsx

@@ -0,0 +1,70 @@
+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>
+  )
+}