62 lines
3.3 KiB
PHP
62 lines
3.3 KiB
PHP
@props([
|
|
'industries' => null,
|
|
])
|
|
|
|
@php
|
|
$industries = $industries ?? [
|
|
['name' => 'Technologie', 'count' => 142, 'delta' => 12, 'href' => route('kategorien')],
|
|
['name' => 'Finanzen', 'count' => 98, 'delta' => 5, 'href' => route('kategorien')],
|
|
['name' => 'Industrie', 'count' => 87, 'delta' => -2, 'href' => route('kategorien')],
|
|
['name' => 'Energie', 'count' => 64, 'delta' => 18, 'href' => route('kategorien')],
|
|
['name' => 'Gesundheit', 'count' => 51, 'delta' => 3, 'href' => route('kategorien')],
|
|
['name' => 'Mobilität', 'count' => 44, 'delta' => 9, 'href' => route('kategorien')],
|
|
['name' => 'Handel', 'count' => 38, 'delta' => -1, 'href' => route('kategorien')],
|
|
['name' => 'Immobilien', 'count' => 32, 'delta' => 4, 'href' => route('kategorien')],
|
|
];
|
|
|
|
$maxCount = max(1, collect($industries)->max('count'));
|
|
$industries = array_slice($industries, 0, 8);
|
|
@endphp
|
|
|
|
<section class="max-w-layout mx-auto px-8 mt-16">
|
|
<header class="flex items-baseline justify-between mb-4 flex-wrap gap-3">
|
|
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">Branchen-Index</h2>
|
|
<span class="eyebrow muted">Letzte 7 Tage</span>
|
|
</header>
|
|
<hr class="rule-strong">
|
|
|
|
<div class="grid border-b border-bg-rule grid-cols-2 md:grid-cols-4">
|
|
@foreach ($industries as $idx => $industry)
|
|
@php
|
|
$delta = (int) ($industry['delta'] ?? 0);
|
|
$direction = $delta > 0 ? 'gain' : ($delta < 0 ? 'loss' : 'flat');
|
|
$percent = max(20, (int) round(($industry['count'] ?? 0) / $maxCount * 100));
|
|
$isTopRow = $idx < 4;
|
|
$isLastInRow = ($idx + 1) % 4 === 0;
|
|
$barClass = $delta < 0 ? 'bg-brand' : 'bg-gain';
|
|
@endphp
|
|
<a href="{{ $industry['href'] ?? route('kategorien') }}"
|
|
class="block px-5 py-[18px] {{ $isLastInRow ? '' : 'md:border-r border-bg-rule' }} {{ $isTopRow ? '' : 'border-t border-bg-rule' }} cursor-pointer hover:bg-bg-elev transition-colors group">
|
|
<div class="flex justify-between items-baseline mb-2 gap-2">
|
|
<span class="text-[14px] font-semibold text-ink group-hover:text-brand transition-colors">{{ $industry['name'] }}</span>
|
|
<span class="font-mono text-[12px] font-semibold
|
|
@if ($direction === 'gain') text-gain
|
|
@elseif ($direction === 'loss') text-loss
|
|
@else text-ink-3 @endif">
|
|
@if ($delta > 0) +{{ $delta }}
|
|
@elseif ($delta < 0) {{ $delta }}
|
|
@else ±0
|
|
@endif
|
|
</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-2 mb-2">
|
|
<span class="font-serif text-[22px] font-semibold tracking-[-0.3px] text-ink">{{ $industry['count'] }}</span>
|
|
<span class="text-[11px] text-ink-3">Meldungen</span>
|
|
</div>
|
|
<div class="h-[3px] bg-bg-rule">
|
|
<div class="h-full {{ $barClass }}" style="width: {{ $percent }}%;"></div>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</section>
|