48 lines
2.2 KiB
PHP
48 lines
2.2 KiB
PHP
@props([
|
|
'releases' => [],
|
|
])
|
|
|
|
@php
|
|
$releases = collect($releases)->take(4)->values();
|
|
|
|
$fallback = collect([
|
|
['title' => 'FinTech-Startup PaymentFlow sichert sich 45 Mio. Euro', 'hits' => 12428],
|
|
['title' => 'Energiewende: Neue Rekorde bei Erneuerbaren', 'hits' => 9831],
|
|
['title' => 'Immobilienmarkt 2025: Trendwende bei Kaufpreisen', 'hits' => 7104],
|
|
['title' => 'Telemedizin-Boom: 3 Mio. Online-Sprechstunden', 'hits' => 5298],
|
|
]);
|
|
|
|
$items = $releases->isNotEmpty()
|
|
? $releases->map(fn ($release) => [
|
|
'title' => \Illuminate\Support\Str::limit($release->title, 70),
|
|
'hits' => (int) ($release->hits ?? 0),
|
|
'href' => route('release.detail', ['slug' => $release->slug]),
|
|
])
|
|
: $fallback->map(fn ($mock) => array_merge($mock, ['href' => '#']));
|
|
|
|
$maxHits = max(1, $items->max('hits'));
|
|
@endphp
|
|
|
|
<section>
|
|
<header class="flex items-baseline justify-between mb-4 min-h-[34px]">
|
|
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] leading-[1.2] text-ink">Meistgelesen</h2>
|
|
</header>
|
|
<hr class="rule-strong mb-1">
|
|
|
|
@foreach ($items as $index => $item)
|
|
@php
|
|
$percent = max(15, (int) round($item['hits'] / $maxHits * 100));
|
|
$isLast = $loop->last;
|
|
@endphp
|
|
<a href="{{ $item['href'] }}" class="block py-3.5 {{ $isLast ? '' : 'border-b border-bg-rule' }} cursor-pointer hover:bg-bg-elev transition-colors group">
|
|
<div class="grid gap-2.5 items-baseline mb-1.5" style="grid-template-columns: 32px 1fr auto;">
|
|
<div class="font-serif text-[18px] text-brand font-semibold leading-none tabular-nums">{{ $index + 1 }}</div>
|
|
<div class="font-serif text-[14px] leading-[1.3] font-medium text-ink group-hover:text-brand transition-colors">{{ $item['title'] }}</div>
|
|
<span class="font-mono text-[11px] text-ink-3">{{ number_format((int) $item['hits'], 0, ',', '.') }}</span>
|
|
</div>
|
|
<div class="ml-[42px] h-[3px] bg-bg-rule">
|
|
<div class="h-full bg-brand" style="width: {{ $percent }}%;"></div>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</section>
|