37 lines
1.9 KiB
PHP
37 lines
1.9 KiB
PHP
@props([
|
|
'name',
|
|
'icon',
|
|
'color' => 'primary',
|
|
'lessons',
|
|
'progress' => 0,
|
|
'next' => null,
|
|
])
|
|
|
|
@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[$color] ?? $colorMap['primary'];
|
|
@endphp
|
|
|
|
<button type="button" {{ $attributes->merge(['class' => 'group text-left bg-bg-soft border border-line rounded-xl p-4 shadow-sm transition-all duration-150 hover:shadow-md hover:-translate-y-0.5 hover:border-line-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 cursor-pointer']) }}>
|
|
<div class="w-10 h-10 rounded-lg {{ $c['bg'] }} {{ $c['ink'] }} grid place-items-center font-bold text-lg mb-3 transition-transform group-hover:scale-105">
|
|
{{ $icon }}
|
|
</div>
|
|
<div class="font-bold text-sm text-ink-1">{{ $name }}</div>
|
|
@if($next)
|
|
<div class="text-xs text-ink-3 mt-1 leading-snug">Nächste Lektion · {{ $next }}</div>
|
|
@endif
|
|
<div class="h-1.5 rounded-full bg-bg-base mt-3.5 overflow-hidden">
|
|
<div class="h-full rounded-full {{ $c['bar'] }} transition-all duration-500" style="width:{{ (int) $progress }}%;"></div>
|
|
</div>
|
|
<div class="flex justify-between text-[11px] text-ink-3 mt-2 font-semibold font-mono tabular-nums">
|
|
<span>{{ $lessons }} Lektionen</span>
|
|
<span class="{{ $c['ink'] }}">{{ (int) $progress }} %</span>
|
|
</div>
|
|
</button>
|