43 lines
2.7 KiB
PHP
43 lines
2.7 KiB
PHP
@php
|
|
$creatorItems = collect(is_array($creators ?? null) ? $creators : [])->filter()->take(4)->values();
|
|
$avatarFallback = 'https://files.skinbase.org/default/avatar_default.webp';
|
|
@endphp
|
|
|
|
@if ($creatorItems->isNotEmpty())
|
|
<section class="mt-14 px-4 sm:px-6 lg:px-8">
|
|
<div class="mb-5 flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-white">Suggested Creators</h2>
|
|
<p class="mt-0.5 text-xs text-nova-400">Creators you might enjoy following</p>
|
|
</div>
|
|
<a href="/creators/top" class="text-sm text-nova-300 transition hover:text-white">Explore all →</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
|
|
@foreach ($creatorItems as $creator)
|
|
<article class="group flex flex-col items-center rounded-2xl bg-nova-800/60 p-5 ring-1 ring-white/5 transition hover:bg-nova-800 hover:ring-white/10">
|
|
<a href="{{ $creator['url'] ?? '#' }}" class="block">
|
|
<img src="{{ $creator['avatar'] ?? $avatarFallback }}" alt="{{ $creator['name'] ?? 'Creator' }}" class="mx-auto h-14 w-14 rounded-full object-cover ring-2 ring-white/10 transition group-hover:ring-accent/50" loading="lazy" decoding="async">
|
|
</a>
|
|
<div class="mt-3 w-full text-center">
|
|
<a href="{{ $creator['url'] ?? '#' }}" class="block truncate text-sm font-semibold text-white transition hover:text-accent">{{ $creator['name'] ?? 'Creator' }}</a>
|
|
@if (!empty($creator['username']))
|
|
<p class="truncate text-xs text-nova-400">@{{ $creator['username'] }}</p>
|
|
@endif
|
|
<div class="mt-2 flex items-center justify-center gap-3 text-xs text-nova-500">
|
|
@if ((int) ($creator['followers_count'] ?? 0) > 0)
|
|
<span>{{ number_format((int) ($creator['followers_count'] ?? 0)) }} followers</span>
|
|
@endif
|
|
@if ((int) ($creator['artworks_count'] ?? 0) > 0)
|
|
<span>{{ number_format((int) ($creator['artworks_count'] ?? 0)) }} artworks</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<a href="{{ $creator['url'] ?? '#' }}" class="mt-4 w-full rounded-lg bg-nova-700 py-1.5 text-center text-xs font-medium text-white transition hover:bg-nova-600">
|
|
View Profile
|
|
</a>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif |