38 lines
1.5 KiB
PHP
38 lines
1.5 KiB
PHP
@props([
|
|
'title',
|
|
'meta',
|
|
'icon',
|
|
'color' => 'primary',
|
|
'points' => 0,
|
|
'startUrl' => null,
|
|
])
|
|
|
|
@php
|
|
$colorMap = [
|
|
'primary' => ['bg' => 'bg-primary-soft', 'ink' => 'text-primary-ink'],
|
|
'rose' => ['bg' => 'bg-rose-soft', 'ink' => 'text-rose-ink'],
|
|
'violet' => ['bg' => 'bg-violet-soft', 'ink' => 'text-violet-ink'],
|
|
'green' => ['bg' => 'bg-green-soft', 'ink' => 'text-green-ink'],
|
|
'amber' => ['bg' => 'bg-amber-soft', 'ink' => 'text-amber-ink'],
|
|
];
|
|
$c = $colorMap[$color] ?? $colorMap['primary'];
|
|
@endphp
|
|
|
|
<div class="group grid grid-cols-[44px_1fr_auto] gap-3 items-center py-3 border-t border-line first:border-t-0 transition-colors hover:bg-bg-tint -mx-2 px-2 rounded-lg">
|
|
<div class="w-10 h-10 rounded-lg {{ $c['bg'] }} {{ $c['ink'] }} grid place-items-center font-bold transition-transform group-hover:scale-105">
|
|
{{ $icon }}
|
|
</div>
|
|
<div class="min-w-0">
|
|
<div class="font-semibold text-sm text-ink-1 truncate">{{ $title }}</div>
|
|
<div class="text-xs text-ink-3 mt-0.5 truncate">{{ $meta }}</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="font-mono tabular-nums text-xs text-amber-ink font-bold">+{{ (int) $points }} Pkt.</span>
|
|
@if($startUrl)
|
|
<x-btn variant="primary" size="sm" as="a" :href="$startUrl">Starten</x-btn>
|
|
@else
|
|
<x-btn variant="primary" size="sm">Starten</x-btn>
|
|
@endif
|
|
</div>
|
|
</div>
|