58 lines
4.1 KiB
PHP
58 lines
4.1 KiB
PHP
@php
|
|
$balance = 2480;
|
|
$items = [
|
|
['key' => 'r1', 'title' => 'Avatar-Brille (gold)', 'emoji' => '🕶', 'price' => 800, 'category' => 'Avatar', 'desc' => 'Goldene Sonnenbrille für deinen Avatar. Cool und stylisch.'],
|
|
['key' => 'r2', 'title' => 'Einhorn-Begleiter', 'emoji' => '🦄', 'price' => 1500, 'category' => 'Tier', 'desc' => 'Ein magischer Begleiter, der dich beim Lernen unterstützt.'],
|
|
['key' => 'r3', 'title' => 'Raketen-Theme', 'emoji' => '🚀', 'price' => 3200, 'category' => 'Theme', 'desc' => 'Verwandle dein Dashboard in eine Weltraumstation.'],
|
|
['key' => 'r4', 'title' => 'Cap (rot)', 'emoji' => '🧢', 'price' => 500, 'category' => 'Avatar', 'desc' => 'Stylische rote Cap für deinen Avatar.'],
|
|
['key' => 'r5', 'title' => 'Drache', 'emoji' => '🐉', 'price' => 2000, 'category' => 'Tier', 'desc' => 'Mächtiger Drachen-Begleiter mit Spezialeffekten.'],
|
|
['key' => 'r6', 'title' => 'Dunkles Theme', 'emoji' => '🌙', 'price' => 1200, 'category' => 'Theme', 'desc' => 'Augenfreundliches Dark-Mode-Theme für späte Lern-Sessions.'],
|
|
['key' => 'r7', 'title' => 'Trophy-Display', 'emoji' => '🏆', 'price' => 700, 'category' => 'Profil', 'desc' => 'Zeige deine Trophäen prominent in deinem Profil.'],
|
|
['key' => 'r8', 'title' => 'Smiley-Pack', 'emoji' => '😎', 'price' => 300, 'category' => 'Profil', 'desc' => 'Coole Emoji-Sticker für Reaktionen und Kommentare.'],
|
|
];
|
|
@endphp
|
|
|
|
<div class="flex flex-col gap-6">
|
|
|
|
<header class="flex justify-between items-end gap-6">
|
|
<div>
|
|
<div class="text-[11px] uppercase tracking-[0.14em] text-ink-3 font-semibold mb-1.5">Shop</div>
|
|
<h1 class="text-[28px] leading-tight font-extrabold tracking-tight text-ink-1">Belohnungen</h1>
|
|
<p class="text-sm text-ink-2 mt-2 max-w-xl leading-relaxed">Gib deine Punkte für Avatare, Themes und Begleiter aus.</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-amber-soft border border-amber-soft">
|
|
<x-heroicon-s-star class="w-5 h-5 text-amber-ink" />
|
|
<span class="text-xl font-bold font-mono tabular-nums text-amber-ink">{{ number_format($balance, 0, ',', '.') }}</span>
|
|
<span class="text-xs font-semibold text-amber-ink">Pkt.</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="grid grid-cols-4 gap-4">
|
|
@foreach($items as $item)
|
|
@php $available = $balance >= $item['price']; @endphp
|
|
<button
|
|
type="button"
|
|
wire:click="$dispatch('openModal', { component: 'rewards.modals.purchase', arguments: { item: {{ \Illuminate\Support\Js::from($item) }}, balance: {{ $balance }} } })"
|
|
class="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 group"
|
|
>
|
|
<div class="w-12 h-12 rounded-lg bg-bg-tint grid place-items-center text-2xl mb-3 transition-transform group-hover:scale-105">
|
|
{{ $item['emoji'] }}
|
|
</div>
|
|
<div class="text-[10px] uppercase tracking-wider text-ink-3 font-semibold mb-1">{{ $item['category'] }}</div>
|
|
<div class="font-bold text-sm text-ink-1 mb-2 leading-tight">{{ $item['title'] }}</div>
|
|
<div class="flex justify-between items-baseline mt-3 pt-3 border-t border-line">
|
|
<span class="font-mono tabular-nums text-sm font-bold {{ $available ? 'text-green-ink' : 'text-ink-3' }}">
|
|
{{ number_format($item['price'], 0, ',', '.') }} Pkt.
|
|
</span>
|
|
@if($available)
|
|
<x-pill variant="success">Verfügbar</x-pill>
|
|
@else
|
|
<x-pill>Noch {{ number_format($item['price'] - $balance, 0, ',', '.') }}</x-pill>
|
|
@endif
|
|
</div>
|
|
</button>
|
|
@endforeach
|
|
</section>
|
|
|
|
</div>
|