112 lines
4.9 KiB
PHP
112 lines
4.9 KiB
PHP
@props([
|
|
'items' => [],
|
|
'marketIndex' => null,
|
|
'asideSlides' => null,
|
|
])
|
|
|
|
@php
|
|
$items = collect($items)->all();
|
|
if (empty($items)) {
|
|
$items = [
|
|
['time' => '14:32', 'text' => 'Siemens Energy hebt Jahresprognose an'],
|
|
['time' => '14:18', 'text' => 'BASF: Restrukturierung in Ludwigshafen abgeschlossen'],
|
|
['time' => '13:55', 'text' => 'Deutsche Bahn meldet Rekord bei Fernverkehr'],
|
|
];
|
|
}
|
|
|
|
$marketIndex ??= [
|
|
'label' => 'DAX',
|
|
'value' => '18.247',
|
|
'delta' => '+0,8%',
|
|
'positive' => true,
|
|
];
|
|
|
|
$asideSlides = collect($asideSlides ?? [
|
|
$marketIndex,
|
|
[
|
|
'label' => 'EUR/USD',
|
|
'value' => '1,08',
|
|
'delta' => '+0,2%',
|
|
'positive' => true,
|
|
],
|
|
[
|
|
'label' => 'Brent Öl',
|
|
'value' => '78,40 $',
|
|
'delta' => '-0,9%',
|
|
'positive' => false,
|
|
],
|
|
])->values()->all();
|
|
@endphp
|
|
|
|
<div class="bg-topbar-grad text-ink-on-dark" aria-label="Ad-Hoc-Ticker">
|
|
<div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 py-2.5 flex items-center gap-3 sm:gap-5 text-[12.5px]">
|
|
<div class="flex items-center gap-3 sm:gap-4 overflow-hidden min-w-0 flex-1">
|
|
<span class="flex items-center gap-1.5 text-accent-warm font-bold text-[10.5px] sm:text-[11px] tracking-[0.15em] flex-shrink-0">
|
|
<span class="w-[7px] h-[7px] rounded-full bg-accent-warm pulse-dot"></span>
|
|
AD-HOC
|
|
</span>
|
|
|
|
<span class="sr-only">
|
|
Ad-hoc-Meldungen:
|
|
@foreach ($items as $item)
|
|
{{ $item['time'] }} {{ $item['text'] }}.
|
|
@endforeach
|
|
</span>
|
|
|
|
<div class="overflow-hidden min-w-0 flex-1" aria-hidden="true">
|
|
<div class="ticker-marquee-track text-[12px] sm:text-[12.5px] whitespace-nowrap">
|
|
@foreach (array_merge($items, $items) as $item)
|
|
<span class="inline-flex shrink-0 gap-2 items-baseline">
|
|
<span class="font-mono text-[11px] text-ink-on-dark-muted">{{ $item['time'] }}</span>
|
|
<span class="text-ink-on-dark">{{ $item['text'] }}</span>
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="hidden sm:inline-block w-px h-[18px] bg-ink-on-dark-rule flex-shrink-0"></span>
|
|
|
|
{{-- Kein position:absolute: sonst null Breite im Fluss, bis Layout kollabiert --}}
|
|
<div class="shrink-0 flex justify-end items-center min-w-0 max-w-[min(92vw,280px)] sm:max-w-[min(42vw,280px)]"
|
|
x-data="{
|
|
slides: @js($asideSlides),
|
|
i: 0,
|
|
init() {
|
|
if (this.slides.length < 2) {
|
|
return;
|
|
}
|
|
window.setInterval(() => {
|
|
this.i = (this.i + 1) % this.slides.length;
|
|
}, 5200);
|
|
},
|
|
}"
|
|
aria-live="polite">
|
|
<div class="grid min-h-[22px] justify-items-end overflow-hidden [grid-template-columns:minmax(0,max-content)]">
|
|
<template x-for="(slide, idx) in slides" :key="idx">
|
|
<div x-show="i === idx"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 -translate-y-full"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-280"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 translate-y-full"
|
|
class="col-start-1 row-start-1 flex items-center gap-2 whitespace-nowrap">
|
|
<span class="text-ink-on-dark-muted font-semibold text-[10.5px] tracking-wider" x-text="slide.label"></span>
|
|
<span class="text-ink-on-dark font-mono text-[12.5px]" x-text="slide.value"></span>
|
|
<span class="font-semibold text-[11.5px] font-mono"
|
|
:class="(slide.positive ?? true) ? 'text-gain' : 'text-loss'"
|
|
x-text="slide.delta"></span>
|
|
<svg width="26" height="10" viewBox="0 0 26 10"
|
|
class="hidden sm:inline-block shrink-0"
|
|
:class="(slide.positive ?? true) ? 'text-gain' : 'text-loss'"
|
|
aria-hidden="true">
|
|
<path d="M0,8 L4,7 L8,5 L12,6 L16,4 L20,3 L24,2"
|
|
fill="none" stroke="currentColor" stroke-width="1.2" />
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|