25 lines
1.1 KiB
JavaScript
25 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import GroupDiscoveryCard from './GroupDiscoveryCard'
|
|
|
|
export default function GroupTrendingSection({ title, description, items = [], href = '/groups', actionLabel = 'See more' }) {
|
|
if (!Array.isArray(items) || items.length === 0) return null
|
|
|
|
return (
|
|
<section className="mt-10">
|
|
<div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<h2 className="text-2xl font-semibold tracking-[-0.02em] text-white">{title}</h2>
|
|
{description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{description}</p> : null}
|
|
</div>
|
|
<a href={href} className="inline-flex items-center gap-2 text-sm font-semibold text-sky-200 transition hover:text-white">
|
|
{actionLabel}
|
|
<i className="fa-solid fa-arrow-right text-xs" />
|
|
</a>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
{items.map((group) => <GroupDiscoveryCard key={group.slug || group.id} group={group} compact />)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|