36 lines
1.4 KiB
JavaScript
36 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import WorldCard from './WorldCard'
|
|
|
|
function defaultRenderItem(item, sourceProps) {
|
|
return <WorldCard key={item.id} world={item} compact {...sourceProps} />
|
|
}
|
|
|
|
export default function WorldsIndexSection({ title, description, items = [], emptyMessage = '', countLabel = 'worlds', renderItem = defaultRenderItem, sourceSurface = '', sourceDetail = '' }) {
|
|
if (!Array.isArray(items) || items.length === 0) {
|
|
if (!emptyMessage) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className="mt-10 rounded-[28px] border border-dashed border-white/10 bg-white/[0.02] p-6 text-sm text-slate-400">
|
|
<div className="font-semibold text-white">{title}</div>
|
|
<div className="mt-2">{emptyMessage}</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
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">{title}</h2>
|
|
{description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{description}</p> : null}
|
|
</div>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{items.length} {countLabel}</div>
|
|
</div>
|
|
<div className="grid gap-4 xl:grid-cols-3">
|
|
{items.map((item) => renderItem(item, { sourceSurface, sourceDetail }))}
|
|
</div>
|
|
</section>
|
|
)
|
|
} |