72 lines
3.5 KiB
PHP
72 lines
3.5 KiB
PHP
@props([
|
|
'release' => null,
|
|
'mock' => null,
|
|
'index' => 1,
|
|
'first' => false,
|
|
])
|
|
|
|
@php
|
|
if ($release) {
|
|
$category = $release?->category?->translations?->firstWhere('locale', 'de')
|
|
?? $release?->category?->translations?->first();
|
|
$categoryName = $category?->name ?? 'Wirtschaft';
|
|
$time = $release?->published_at?->isToday()
|
|
? $release->published_at->format('H:i')
|
|
: ($release?->published_at?->isYesterday() ? 'Gestern' : $release?->published_at?->isoFormat('D. MMM'));
|
|
$title = $release->title;
|
|
$company = $release?->company?->name ?? 'Unternehmen';
|
|
$href = route('release.detail', ['slug' => $release->slug]);
|
|
$image = $release?->images?->first();
|
|
$imageUrl = $image?->variantUrl('card') ?? $image?->url();
|
|
$gradient = 'linear-gradient(135deg,#3A4A5A,#6B7C95)';
|
|
$number = str_pad((string) $index, 2, '0', STR_PAD_LEFT);
|
|
} else {
|
|
$categoryName = $mock['cat'];
|
|
$time = $mock['time'];
|
|
$title = $mock['title'];
|
|
$company = $mock['company'];
|
|
$href = '#';
|
|
$imageUrl = null;
|
|
$gradient = $mock['gradient'] ?? 'linear-gradient(135deg,#3A4A5A,#6B7C95)';
|
|
$number = $mock['n'];
|
|
}
|
|
@endphp
|
|
|
|
<article class="px-3.5 py-4 border-b border-bg-rule cursor-pointer transition-colors hover:bg-bg-elev group {{ $first ? 'border-t border-bg-rule-strong' : '' }}">
|
|
<a href="{{ $href }}" class="block cursor-pointer">
|
|
<div class="grid items-baseline gap-3 mb-2.5" style="grid-template-columns: 32px 1fr auto;">
|
|
<div class="font-serif text-[18px] text-brand font-medium leading-none tabular-nums">{{ $number }}</div>
|
|
<span class="bp-cat">{{ $categoryName }}</span>
|
|
<span class="font-mono text-[11px] text-ink-3">{{ $time }}</span>
|
|
</div>
|
|
|
|
<div class="grid items-start gap-3" style="grid-template-columns: 32px 64px 1fr;">
|
|
<div></div>
|
|
|
|
<div class="w-16 h-16 flex-shrink-0 relative overflow-hidden" style="background: {{ $gradient }};">
|
|
@if ($imageUrl)
|
|
<img src="{{ $imageUrl }}" alt="" class="absolute inset-0 h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy">
|
|
@else
|
|
<svg width="64" height="64" viewBox="0 0 64 64" class="absolute inset-0" aria-hidden="true">
|
|
<circle cx="48" cy="20" r="18" fill="rgba(255,255,255,0.08)" />
|
|
<rect x="6" y="40" width="36" height="2" fill="rgba(255,255,255,0.18)" />
|
|
<rect x="6" y="46" width="24" height="2" fill="rgba(255,255,255,0.12)" />
|
|
</svg>
|
|
@endif
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-serif text-[15.5px] leading-[1.3] m-0 font-medium tracking-[-0.1px] text-ink group-hover:text-brand transition-colors">
|
|
{{ $title }}
|
|
</h3>
|
|
<div class="text-[11.5px] text-ink-3 mt-1.5 flex items-center gap-1.5">
|
|
<svg width="10" height="10" viewBox="0 0 11 11" class="text-ok flex-shrink-0" aria-hidden="true">
|
|
<circle cx="5.5" cy="5.5" r="5" fill="currentColor" />
|
|
<path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round" />
|
|
</svg>
|
|
<span>{{ $company }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|