Files
SkinbaseNova/resources/views/forum/components/category-card.blade.php

51 lines
2.3 KiB
PHP

@php
$name = data_get($category, 'name', 'Untitled');
$slug = data_get($category, 'slug');
$categoryUrl = !empty($slug) ? route('forum.category.show', ['category' => $slug]) : '#';
$threads = (int) data_get($category, 'thread_count', 0);
$posts = (int) data_get($category, 'post_count', 0);
$lastActivity = data_get($category, 'last_activity_at');
$preview = data_get($category, 'preview_image', config('forum.preview_images.default'));
@endphp
<a
href="{{ $categoryUrl }}"
aria-label="Open {{ $name }} category"
role="listitem"
class="group relative block overflow-hidden rounded-xl border border-white/5 bg-slate-900/80 shadow-xl backdrop-blur transition-all duration-300 hover:shadow-cyan-500/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
>
<div class="relative aspect-[4/3] sm:aspect-[16/9]">
<img
src="{{ $preview }}"
alt="{{ $name }} preview"
loading="lazy"
decoding="async"
class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-[1.02]"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
<div class="absolute inset-x-0 bottom-0 p-4">
<div class="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-cyan-400/15 text-cyan-300">
<i class="fa-solid fa-comments" aria-hidden="true"></i>
</div>
<h3 class="text-lg font-semibold text-white">{{ $name }}</h3>
<p class="mt-1 text-xs text-white/60">
Last activity:
@if ($lastActivity)
<time datetime="{{ \Illuminate\Support\Carbon::parse($lastActivity)->toIso8601String() }}">
{{ \Illuminate\Support\Carbon::parse($lastActivity)->diffForHumans() }}
</time>
@else
No activity yet
@endif
</p>
<div class="mt-3 flex items-center gap-4 text-sm text-cyan-300">
<span>{{ number_format($posts) }} posts</span>
<span>{{ number_format($threads) }} topics</span>
</div>
</div>
</div>
</a>