Save workspace changes

resources/js/components/worlds/WorldCommunitySubmissionsSection.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+function statusTone(item) {
+  return item?.status_label === 'Featured'
+    ? 'border-amber-300/30 bg-amber-400/12 text-amber-100'
+    : 'border-emerald-300/25 bg-emerald-400/10 text-emerald-100'
+}
+
+export default function WorldCommunitySubmissionsSection({ section }) {
+  if (!section || !Array.isArray(section.items) || section.items.length === 0) {
+    return null
+  }
+
+  return (
+    <section className="mt-10">
+      <div className="mb-5 flex items-end justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">{section.title}</h2>
+          {section.description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{section.description}</p> : null}
+        </div>
+        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{section.items.length} artworks</div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {section.items.map((item) => (
+          <a key={item.id} href={item.url} className="group overflow-hidden rounded-[26px] border border-white/10 bg-white/[0.03] transition duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.05]">
+            <div className="relative overflow-hidden border-b border-white/10 bg-slate-950/80">
+              {item.image ? (
+                <img src={item.image} alt={item.title} className="aspect-[16/10] w-full object-cover transition duration-500 group-hover:scale-[1.04]" />
+              ) : (
+                <div className="aspect-[16/10] w-full bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_42%),linear-gradient(135deg,_rgba(15,23,42,0.96),_rgba(2,6,23,0.96))]" />
+              )}
+              <div className="pointer-events-none absolute inset-x-0 top-0 flex items-start justify-between gap-2 p-4">
+                {item.context_label ? <span className="rounded-full border border-white/15 bg-black/35 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-white/80">{item.context_label}</span> : null}
+                {item.status_label ? <span className={`rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] ${statusTone(item)}`}>{item.status_label}</span> : null}
+              </div>
+            </div>
+
+            <div className="p-4">
+              <h3 className="text-lg font-semibold tracking-[-0.02em] text-white">{item.title}</h3>
+              {item.subtitle ? <div className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-500">{item.subtitle}</div> : null}
+              {item.description ? <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p> : null}
+              {Array.isArray(item.meta) && item.meta.length > 0 ? (
+                <div className="mt-4 flex flex-wrap gap-2">
+                  {item.meta.map((entry) => (
+                    <span key={entry} className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs text-slate-300">{entry}</span>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  )
+}