57 lines
2.9 KiB
PHP
57 lines
2.9 KiB
PHP
@php
|
|
$colorMap = [
|
|
'primary' => ['bg' => 'bg-primary-soft', 'ink' => 'text-primary-ink', 'bar' => 'bg-primary-ink'],
|
|
'rose' => ['bg' => 'bg-rose-soft', 'ink' => 'text-rose-ink', 'bar' => 'bg-rose-ink'],
|
|
'violet' => ['bg' => 'bg-violet-soft', 'ink' => 'text-violet-ink', 'bar' => 'bg-violet-ink'],
|
|
'green' => ['bg' => 'bg-green-soft', 'ink' => 'text-green-ink', 'bar' => 'bg-green-ink'],
|
|
'amber' => ['bg' => 'bg-amber-soft', 'ink' => 'text-amber-ink', 'bar' => 'bg-amber-ink'],
|
|
];
|
|
$c = $colorMap[$subject['color'] ?? 'primary'] ?? $colorMap['primary'];
|
|
@endphp
|
|
|
|
<div>
|
|
<header class="flex items-start justify-between gap-4 p-6 border-b border-line">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-lg grid place-items-center font-bold text-xl {{ $c['bg'] }} {{ $c['ink'] }}">
|
|
{{ $subject['icon'] ?? '?' }}
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-lg text-ink-1">{{ $subject['name'] ?? '' }}</div>
|
|
<div class="text-xs text-ink-3 mt-0.5">{{ $subject['level'] ?? '' }}</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" wire:click="closeModal" aria-label="Schließen" class="text-ink-3 hover:text-ink-1 transition-colors p-1">
|
|
<x-heroicon-o-x-mark class="w-5 h-5" />
|
|
</button>
|
|
</header>
|
|
|
|
<div class="p-6 flex flex-col gap-5">
|
|
<div>
|
|
<div class="text-[11px] uppercase tracking-[0.12em] text-ink-3 font-semibold mb-2">Fortschritt</div>
|
|
<div class="flex justify-between items-baseline mb-2">
|
|
<span class="text-sm text-ink-2 font-mono tabular-nums">{{ $subject['lessons'] ?? '0 / 0' }} Lektionen</span>
|
|
<span class="text-2xl font-bold tracking-tight text-ink-1 font-mono tabular-nums">{{ (int) ($subject['progress'] ?? 0) }} %</span>
|
|
</div>
|
|
<div class="h-2 rounded-full bg-bg-base overflow-hidden">
|
|
<div class="h-full rounded-full {{ $c['bar'] }} transition-all duration-500" style="width:{{ (int) ($subject['progress'] ?? 0) }}%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-bg-tint rounded-lg p-4 border border-line">
|
|
<div class="text-[11px] uppercase tracking-[0.12em] text-ink-3 font-semibold mb-1">Nächste Lektion</div>
|
|
<div class="font-semibold text-sm text-ink-1">{{ $subject['next'] ?? '—' }}</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2 pt-2">
|
|
<x-btn variant="primary" class="flex-1 justify-center">
|
|
<x-heroicon-s-play class="w-4 h-4" />
|
|
Lektion starten
|
|
</x-btn>
|
|
<x-btn class="flex-1 justify-center" wire:click="closeModal">
|
|
<x-heroicon-o-list-bullet class="w-4 h-4" />
|
|
Alle Lektionen
|
|
</x-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|