52 lines
2.2 KiB
PHP
52 lines
2.2 KiB
PHP
@props(['ad'])
|
|
|
|
@php
|
|
$time = $ad['time'] ?? '';
|
|
$date = $ad['date'] ?? '';
|
|
$category = $ad['category'] ?? 'Anzeige';
|
|
$title = $ad['title'] ?? '';
|
|
$company = $ad['company'] ?? '';
|
|
$href = $ad['href'] ?? '#';
|
|
|
|
$catClass = 'self-start whitespace-nowrap text-[9.5px] font-bold uppercase leading-snug tracking-[0.14em] text-card-warm-cat max-md:mt-1 max-md:text-[9px] max-md:tracking-[0.1em]';
|
|
@endphp
|
|
|
|
<div class="-mx-4 my-2">
|
|
<div class="flex items-center gap-2.5 px-4">
|
|
<span class="h-px flex-1 bg-bg-card-warm-rule"></span>
|
|
<span class="text-[9px] font-bold uppercase tracking-[0.22em] text-ink-on-dark-muted">Anzeige</span>
|
|
<span class="h-px flex-1 bg-bg-card-warm-rule"></span>
|
|
</div>
|
|
|
|
<a href="{{ $href }}" rel="sponsored nofollow" @class([
|
|
'grid items-start bg-bg-card-warm py-4 pl-1.5 pr-4 sm:pl-2',
|
|
'cursor-pointer transition-colors hover:bg-bg-card-warm-hover',
|
|
'max-md:grid-cols-[auto_minmax(0,1fr)] max-md:gap-x-3',
|
|
'md:grid-cols-[3.75rem_6.25rem_minmax(0,1fr)] md:gap-x-4',
|
|
])>
|
|
<div class="flex min-w-0 shrink-0 flex-col gap-0.5 tabular-nums pt-0.5">
|
|
@if ($time !== '')
|
|
<span class="font-mono text-[11px] leading-none text-card-warm-cat sm:text-[12px]">{{ $time }}</span>
|
|
@endif
|
|
@if ($date !== '')
|
|
<span class="text-[9px] leading-tight text-ink-4 sm:text-[10px]">{{ $date }}</span>
|
|
@endif
|
|
<span class="{{ $catClass }} md:hidden">{{ $category }}</span>
|
|
</div>
|
|
<span class="{{ $catClass }} hidden md:inline">{{ $category }}</span>
|
|
<div class="min-w-0">
|
|
<div class="font-serif text-[15.5px] font-medium leading-[1.3] text-card-warm-title">
|
|
{{ $title }}
|
|
</div>
|
|
@if ($company)
|
|
<div class="mt-1 text-[11px] text-card-warm-cat">{{ $company }}</div>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
|
|
<div class="flex items-center gap-2.5 px-4">
|
|
<span class="h-px flex-1 bg-bg-card-warm-rule"></span>
|
|
<span class="text-[9px] font-bold uppercase tracking-[0.22em] text-ink-on-dark-muted">Ende Anzeige</span>
|
|
<span class="h-px flex-1 bg-bg-card-warm-rule"></span>
|
|
</div>
|
|
</div>
|