mirror of
https://github.com/openclassify/openclassify.git
synced 2026-04-14 11:12:09 -05:00
79 lines
4.1 KiB
PHP
79 lines
4.1 KiB
PHP
@php
|
|
$categoryCount = $categories->count();
|
|
@endphp
|
|
|
|
<div class="max-w-[1320px] mx-auto px-4 py-5 md:py-7 space-y-7">
|
|
<section class="space-y-4">
|
|
<div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<h2 class="text-2xl font-extrabold tracking-tight text-slate-950 md:text-3xl">All categories</h2>
|
|
<p class="mt-1 text-sm text-slate-500 md:text-base">A single directory view with the same spacing and chrome used across the frontend.</p>
|
|
</div>
|
|
<p class="text-sm font-medium text-slate-500">{{ number_format($categoryCount, 0, '.', ',') }} categories</p>
|
|
</div>
|
|
|
|
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
|
@foreach($categories as $category)
|
|
@php
|
|
$childNames = $category->children
|
|
->take(3)
|
|
->pluck('name')
|
|
->filter()
|
|
->implode(' · ');
|
|
$extraChildCount = max($category->children->count() - 3, 0);
|
|
$icon = match (trim((string) ($category->icon ?? ''))) {
|
|
'laptop' => 'heroicon-o-computer-desktop',
|
|
'car' => 'heroicon-o-truck',
|
|
'home' => 'heroicon-o-home',
|
|
'shirt' => 'heroicon-o-shopping-bag',
|
|
'sofa' => 'heroicon-o-home-modern',
|
|
'football' => 'heroicon-o-trophy',
|
|
'briefcase' => 'heroicon-o-briefcase',
|
|
'wrench' => 'heroicon-o-wrench-screwdriver',
|
|
default => null,
|
|
};
|
|
$iconLabel = strtoupper(\Illuminate\Support\Str::substr($category->name, 0, 1));
|
|
@endphp
|
|
<a
|
|
href="{{ route('listings.index', ['category' => $category->id]) }}"
|
|
class="group flex h-full flex-col rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm transition duration-200 hover:-translate-y-0.5 hover:border-blue-200 hover:shadow-lg"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<span class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-slate-200 bg-slate-50 text-slate-900 shadow-sm">
|
|
@if($icon)
|
|
<x-dynamic-component :component="$icon" class="h-7 w-7" />
|
|
@else
|
|
<span class="text-2xl font-semibold">{{ $iconLabel }}</span>
|
|
@endif
|
|
</span>
|
|
<span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-600">
|
|
{{ number_format($category->children->count(), 0, '.', ',') }} subcategories
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-6 space-y-3">
|
|
<h3 class="text-2xl font-extrabold tracking-tight text-slate-950 transition group-hover:text-blue-700">
|
|
{{ $category->name }}
|
|
</h3>
|
|
<p class="text-sm leading-6 text-slate-600">
|
|
{{ $childNames !== '' ? $childNames : 'Open this category to browse available listings and subcategories.' }}
|
|
@if($extraChildCount > 0)
|
|
<span class="font-semibold text-slate-900">+{{ $extraChildCount }} more</span>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-auto pt-6">
|
|
<span class="inline-flex items-center gap-2 text-sm font-semibold text-blue-700">
|
|
Explore category
|
|
<svg class="h-4 w-4 transition group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 6l6 6-6 6"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
</div>
|