You've already forked Atomcms-edit
root
87 lines
3.6 KiB
PHP
Executable File
87 lines
3.6 KiB
PHP
Executable File
@props([
|
|
'title',
|
|
'icon',
|
|
'data',
|
|
'valueKey',
|
|
'valueType',
|
|
'relationship' => null,
|
|
'formatValue' => null,
|
|
])
|
|
|
|
<div class="rounded-xl bg-[var(--color-surface)] p-3 md:p-4 shadow-xl border border-[var(--color-text-muted)]">
|
|
<div class="flex justify-center gap-x-3 text-center font-bold text-[var(--color-text)]">
|
|
<div class="flex items-center">
|
|
<img src="{{ asset('/assets/images/icons/' . $icon) }}" alt="{{ $title }}" class="w-5 h-5 md:w-6 md:h-6" style="image-rendering: pixelated;">
|
|
</div>
|
|
<span class="text-base md:text-lg">{{ __($title) }}</span>
|
|
</div>
|
|
|
|
<div class="mt-3 md:mt-4 flex flex-col gap-y-2 md:gap-y-3">
|
|
@forelse ($data as $index => $entry)
|
|
<div class="group relative p-3 md:p-4 rounded-xl bg-[var(--color-background)] flex gap-x-2 md:gap-x-3 items-center h-[70px] md:h-[80px] overflow-hidden border border-[var(--color-text-muted)] hover:border-[var(--color-primary)] hover:bg-[var(--color-primary)] transition-all duration-300">
|
|
<!-- Rank Badge -->
|
|
<div class="relative flex-shrink-0">
|
|
<div @class([
|
|
'w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center font-bold text-base md:text-lg shadow-lg',
|
|
'bg-[var(--color-primary)] text-[var(--button-text-color)] ring-2 ring-[var(--color-primary)] ring-offset-2 ring-offset-[var(--color-surface)]' => $index + 1 == 1,
|
|
'bg-[var(--color-text-muted)] text-[var(--button-text-color)] ring-2 ring-[var(--color-text-muted)] ring-offset-2 ring-offset-[var(--color-surface)]' => $index + 1 == 2,
|
|
'bg-[var(--color-accent)] text-white ring-2 ring-[var(--color-accent)] ring-offset-2 ring-offset-[var(--color-surface)]' => $index + 1 == 3,
|
|
'bg-[var(--color-background)] text-[var(--color-text-muted)]' => $index + 1 > 3,
|
|
])>
|
|
{{ $index + 1 }}
|
|
</div>
|
|
@if($index + 1 <= 3)
|
|
<div class="absolute -top-1 -right-1 text-lg md:text-xl">
|
|
{{ $index + 1 == 1 ? '🥇' : ($index + 1 == 2 ? '🥈' : '🥉') }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Avatar -->
|
|
<div class="relative flex-shrink-0">
|
|
<img @class([
|
|
'w-12 h-12 md:w-16 md:h-16 rounded-lg border-2 transition-all duration-300 group-hover:scale-110',
|
|
'border-[var(--color-primary)] shadow-lg shadow-[var(--color-primary)]/30' => $index + 1 == 1,
|
|
'border-[var(--color-text-muted)]' => $index + 1 == 2,
|
|
'border-[var(--color-accent)]' => $index + 1 == 3,
|
|
'border-[var(--color-text-muted)] group-hover:border-[var(--color-primary)]' => $index + 1 > 3,
|
|
])
|
|
src="{{ setting('avatar_imager') }}{{ $relationship ? $entry->{$relationship}?->look : $entry->look }}&size=b&head_direction=2&gesture=sml&headonly=1"
|
|
alt="" />
|
|
@if($index + 1 == 1)
|
|
<div class="absolute -bottom-1 -right-1 w-4 h-4 md:w-5 md:h-5 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-xs shadow-lg">
|
|
👑
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- User Info -->
|
|
<div class="flex-1 min-w-0">
|
|
<p class="font-bold text-[var(--color-text)] truncate group-hover:text-[var(--color-primary)] transition-colors duration-300 text-sm md:text-base">
|
|
{{ $relationship ? $entry->{$relationship}?->username : $entry->username }}
|
|
</p>
|
|
<p @class([
|
|
'text-xs md:text-sm font-medium',
|
|
'text-[var(--color-primary)]' => $index + 1 == 1,
|
|
'text-[var(--color-text-muted)]' => $index + 1 > 1,
|
|
])>
|
|
{{ $formatValue ? $formatValue($entry->{$valueKey}) : $entry->{$valueKey} }} {{ $valueType }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Trophy -->
|
|
@if($index + 1 == 1)
|
|
<div class="text-2xl md:text-3xl animate-pulse">🏆</div>
|
|
@elseif($index + 1 <= 3)
|
|
<div class="text-xl md:text-2xl">⭐</div>
|
|
@endif
|
|
</div>
|
|
@empty
|
|
<div class="p-6 md:p-8 text-center text-[var(--color-text-muted)]">
|
|
<div class="text-3xl md:text-4xl mb-2">📊</div>
|
|
<p>No data available</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|