12-05-2026 Frontend dev

resources/views/components/web/most-read.blade.php

@@ -0,0 +1,48 @@
+@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>