96 lines
4.8 KiB
PHP
96 lines
4.8 KiB
PHP
<div
|
||
class="glass-card rounded-2xl p-4 border border-white/10 bg-white/5 max-h-fit"
|
||
@if($state === 'running') wire:poll.3s="pollUpdate"
|
||
@else wire:poll.2m="refreshVersions"
|
||
@endif
|
||
>
|
||
<div class="flex items-start gap-3">
|
||
{{-- CluBird Icon --}}
|
||
<div class="relative shrink-0 flex items-center justify-center rounded-xl size-12"
|
||
style="background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 0 18px rgba(99,102,241,0.35)">
|
||
<svg viewBox="0 0 28 28" width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
||
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
||
<circle cx="19" cy="8" r="2" fill="white"/>
|
||
</svg>
|
||
@if($state === 'running')
|
||
<div class="absolute inset-0 rounded-xl border-2 border-indigo-400/60 animate-ping" style="animation-duration:1.8s"></div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="min-w-0 flex-1">
|
||
<div class="flex items-start justify-between gap-3">
|
||
<div class="min-w-0">
|
||
<div class="text-[13px] font-semibold" style="color:var(--mw-t1)">
|
||
<span style="color:var(--mw-t1)">Clu</span><span style="color:#6366f1">Bird</span>
|
||
<span class="font-normal" style="color:var(--mw-t3)">Update</span>
|
||
</div>
|
||
|
||
<div class="text-[11px] mt-0.5" style="color:var(--mw-t4)">
|
||
@if($displayCurrent)
|
||
aktuell: <span style="color:var(--mw-t2)">{{ $displayCurrent }}</span>
|
||
@else
|
||
aktuell: <span style="color:var(--mw-t5)">–</span>
|
||
@endif
|
||
|
||
@if($displayLatest)
|
||
<span class="mx-1" style="color:var(--mw-b2)">•</span>
|
||
verfügbar: <span class="text-indigo-300">{{ $displayLatest }}</span>
|
||
@endif
|
||
</div>
|
||
|
||
@if($progressLine || $errorLine)
|
||
<div class="mt-1 text-[10px] leading-tight">
|
||
@if($progressLine)
|
||
<div style="color:var(--mw-t4)">{{ $progressLine }}</div>
|
||
@endif
|
||
@if($errorLine)
|
||
<div class="text-rose-300">{{ $errorLine }}</div>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="flex flex-col items-end gap-1.5 shrink-0">
|
||
<span class="inline-flex items-center gap-1 rounded-full text-[10px] border px-2.5 py-0.5 {{ $badgeClass }}">
|
||
<i class="ph {{ $badgeIcon }} text-[11px]"></i>
|
||
{{ $badgeText }}
|
||
</span>
|
||
|
||
@if($showButton)
|
||
<button wire:click="runUpdate"
|
||
@disabled($buttonDisabled)
|
||
class="inline-flex items-center gap-1 rounded-full text-[10px] px-2.5 py-0.5 border
|
||
text-indigo-300 border-indigo-500/40 bg-indigo-500/10
|
||
hover:bg-indigo-500/20 hover:border-indigo-400/60
|
||
disabled:opacity-50 transition-colors">
|
||
<i class="ph ph-arrow-fat-lines-up text-[12px]"></i>
|
||
{{ $buttonLabel }}
|
||
</button>
|
||
@endif
|
||
|
||
<button wire:click="openLogs"
|
||
class="inline-flex items-center gap-1 rounded-full text-[10px] px-2.5 py-0.5 border
|
||
border-white/10 bg-white/5 hover:bg-white/10 transition-colors"
|
||
style="color:var(--mw-t4)">
|
||
<i class="ph ph-list-bullets text-[11px]"></i>
|
||
Logs
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
@if($state === 'running')
|
||
<div class="mt-2.5 h-1 rounded-full overflow-hidden" style="background:var(--mw-b1)">
|
||
<div class="h-full rounded-full bg-indigo-400/70 animate-[mwprogress_1.4s_ease-in-out_infinite]" style="width:40%"></div>
|
||
</div>
|
||
<style>
|
||
@keyframes mwprogress {
|
||
0% { transform: translateX(-150%) }
|
||
100% { transform: translateX(350%) }
|
||
}
|
||
</style>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|