64 lines
4.0 KiB
JavaScript
64 lines
4.0 KiB
JavaScript
import React from 'react'
|
|
|
|
function EntityCard({ item, sectionKey }) {
|
|
return (
|
|
<a href={item.url} data-world-event="world_entity_clicked" data-world-section-key={sectionKey} data-world-entity-type={item.entity_type || ''} data-world-entity-id={item.id} data-world-entity-title={item.title || ''} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/15 hover:bg-white/[0.06]">
|
|
<div className="flex items-center gap-3">
|
|
{item.avatar ? <img src={item.avatar} alt="" className="h-12 w-12 rounded-2xl border border-white/10 object-cover" /> : item.image ? <img src={item.image} alt="" className="h-12 w-12 rounded-2xl border border-white/10 object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-500"><i className="fa-solid fa-user-group" /></div>}
|
|
<div className="min-w-0 flex-1">
|
|
{item.context_label ? <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.context_label}</div> : null}
|
|
<div className="truncate text-sm font-semibold text-white">{item.title}</div>
|
|
{item.subtitle ? <div className="truncate text-xs uppercase tracking-[0.14em] text-slate-500">{item.subtitle}</div> : null}
|
|
</div>
|
|
</div>
|
|
{item.description ? <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p> : null}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
function RewardedCard({ item }) {
|
|
const creator = item?.creator || null
|
|
|
|
if (!creator) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<a href={creator.profile_url || '#'} data-world-event="world_entity_clicked" data-world-section-key="recap_rewarded" data-world-entity-type="creator" data-world-entity-id={creator.id || 0} data-world-entity-title={creator.name || creator.username || 'Creator'} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/15 hover:bg-white/[0.06]">
|
|
<div className="flex items-center gap-3">
|
|
{creator.avatar_url ? <img src={creator.avatar_url} alt={creator.username || creator.name} className="h-12 w-12 rounded-2xl border border-white/10 object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-500"><i className="fa-solid fa-user" /></div>}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-semibold text-white">{creator.name || creator.username || 'Creator'}</div>
|
|
<div className="truncate text-xs uppercase tracking-[0.14em] text-slate-500">{item.badge_label}</div>
|
|
</div>
|
|
</div>
|
|
{item.artwork?.title ? <div className="mt-3 text-sm text-slate-300">{item.artwork.title}</div> : null}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export default function WorldRecapCreatorsPanel({ section }) {
|
|
const items = Array.isArray(section?.items) ? section.items : []
|
|
const rewarded = Array.isArray(section?.rewarded) ? section.rewarded.filter(Boolean) : []
|
|
|
|
if (items.length === 0 && rewarded.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">
|
|
<h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">{section.title || 'Creators and groups'}</h2>
|
|
{section.description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{section.description}</p> : null}
|
|
</div>
|
|
{items.length > 0 ? <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">{items.map((item) => <EntityCard key={`${item.entity_type}-${item.id}`} item={item} sectionKey="recap_creators" />)}</div> : null}
|
|
{rewarded.length > 0 ? (
|
|
<div className="mt-6">
|
|
<div className="mb-4 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Rewarded contributors</div>
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{rewarded.map((item) => <RewardedCard key={item.id} item={item} />)}</div>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
)
|
|
}
|