Commit workspace changes

resources/js/components/groups/GroupSummaryPanel.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import GroupBadgePill from './GroupBadgePill'
+
+export default function GroupSummaryPanel({ group, artwork }) {
+  if (!group) return null
+
+  return (
+    <section className="overflow-hidden rounded-[28px] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_36%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] px-5 py-5 shadow-[0_22px_55px_rgba(0,0,0,0.26)] backdrop-blur-xl sm:px-6">
+      <div className="flex items-start gap-4">
+        <a href={group.urls?.public || '/groups'} className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
+          {group.avatar_url ? <img src={group.avatar_url} alt={group.name} className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
+        </a>
+        <div className="min-w-0 flex-1">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Published as a group</div>
+          <a href={group.urls?.public || '/groups'} className="mt-2 block text-xl font-semibold tracking-[-0.02em] text-white transition hover:text-sky-300">{group.name}</a>
+          <p className="mt-2 text-sm leading-6 text-white/65">{group.headline || group.bio_excerpt || `${artwork?.title || 'This artwork'} is credited to a collaborative group identity on Skinbase.`}</p>
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-2">
+        {(Array.isArray(group.trust_signals) ? group.trust_signals : []).slice(0, 3).map((signal) => (
+          <GroupBadgePill key={signal.key} label={signal.label} tone={signal.tone} />
+        ))}
+        {group.is_recruiting ? <GroupBadgePill label="Recruiting" tone="emerald" /> : null}
+      </div>
+
+      <div className="mt-5 grid grid-cols-3 gap-2 rounded-2xl border border-white/10 bg-black/20 p-3 text-center">
+        <div>
+          <div className="text-lg font-semibold text-white">{Number(group.counts?.artworks || 0).toLocaleString()}</div>
+          <div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Artworks</div>
+        </div>
+        <div>
+          <div className="text-lg font-semibold text-white">{Number(group.counts?.members || 0).toLocaleString()}</div>
+          <div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Members</div>
+        </div>
+        <div>
+          <div className="text-lg font-semibold text-white">{Number(group.counts?.followers || 0).toLocaleString()}</div>
+          <div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Followers</div>
+        </div>
+      </div>
+
+      <div className="mt-5 flex flex-wrap gap-2">
+        <a href={group.urls?.public || '/groups'} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15">Open group page</a>
+        {group.urls?.releases ? <a href={group.urls.releases} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Browse releases</a> : null}
+      </div>
+    </section>
+  )
+}