klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Build world campaigns rewards and recaps

Browse Source
This commit is contained in:
Gregor Klevže
2026-05-01 11:44:41 +02:00
parent 28e7e46e13
commit 257b0dbef6
100 changed files with 11300 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
resources/js/components/worlds/WorldRecapCommunityHighlights.jsx Normal file
View File

@@ -0,0 +1,39 @@
import React from 'react'
export default function WorldRecapCommunityHighlights({ section }) {
const items = Array.isArray(section?.items) ? section.items : []
if (items.length === 0) {
return null
}
return (
<section className="mt-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
<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 || 'Community highlights'}</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">{items.length} artworks</div>
</div>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{items.map((item) => (
<a key={item.id} href={item.url} data-world-event="world_entity_clicked" data-world-section-key="recap_community" data-world-entity-type="artwork" data-world-entity-id={item.id} data-world-entity-title={item.title || ''} className="group overflow-hidden rounded-[26px] border border-white/10 bg-black/20 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>
<div className="p-4">
<div className="flex flex-wrap items-center gap-2">
{item.context_label ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-200">{item.context_label}</span> : null}
{item.status_label ? <span className="rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-100">{item.status_label}</span> : null}
</div>
<h3 className="mt-3 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}
</div>
</a>
))}
</div>
</section>
)
}