You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
1.4 KiB
27 lines
1.4 KiB
|
|
|
|
export default function TopCreators({ creators, navigate }) {
|
|
return (
|
|
<div className="mt-10">
|
|
<h2 className="text-3xl font-bold mb-4 text-white">Top Créateurs</h2>
|
|
<div className="grid grid-cols-1 lg:grid-cols-5 gap-8 mt-8">
|
|
{creators && creators.length > 0 ? creators.map((creator, index) => (
|
|
<div
|
|
key={creator.id || index}
|
|
className="flex flex-col items-center glassmorphism py-2"
|
|
onClick={() => navigate(`/channel/${creator.id}`)}
|
|
>
|
|
<img src={creator.profilepicture} alt={creator.name} className="w-[128px] aspect-square rounded-full" />
|
|
<h3 className="text-xl text-white font-bold mt-1">{creator.name}</h3>
|
|
<span className="text-sm text-gray-500">{creator.subscriber_count} abonné{creator.subscriber_count > 1 ? 's' : ''}</span>
|
|
<p className="text-center text-gray-400">
|
|
<span>{creator.description.slice(0, 100) + (creator.description.length > 100 ? '...' : '')}</span>
|
|
</p>
|
|
</div>
|
|
)) : (
|
|
<p className="text-gray-500">Aucun créateur disponible</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|