Kevin Adametz
3843e534da
@php-Bloecke von feed-item, feed-top-item, focus-side-item, focus-hero, kategorie, newsroom, release-detail, veroeffentlichen nutzen die neuen Model-Helper — gerendertes Markup unveraendert (Web-Suite 215 gruen). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
58 lines
3 KiB
PHP
58 lines
3 KiB
PHP
@props([
|
|
'release' => null,
|
|
'index' => 1,
|
|
'first' => false,
|
|
])
|
|
|
|
@php
|
|
$categoryName = $release?->localizedCategoryName();
|
|
$time = $release?->compactPublishedLabel();
|
|
$title = $release->title;
|
|
$company = $release?->company?->name;
|
|
$href = route('release.detail', ['slug' => $release->slug]);
|
|
$imageUrl = $release?->cardImageUrl();
|
|
$placeholderUrl = $imageUrl ? null : $release?->chosenPlaceholderUrl();
|
|
$gradient = 'linear-gradient(135deg,#3A4A5A,#6B7C95)';
|
|
$number = str_pad((string) $index, 2, '0', STR_PAD_LEFT);
|
|
@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">
|
|
@elseif ($placeholderUrl)
|
|
<img src="{{ $placeholderUrl }}" alt="" aria-hidden="true" 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>
|